自定义组件会影响其它样式文件中使用的伪元素样式 - WXOPEN Club

例如A页面当中一旦引用自定义组件如:

"usingComponents": {

"min-mask": "../../min-components/min-mask/min-mask",

"min-popup": "../../min-components/min-popup/min-popup",

"min-iconfont": "../../min-components/min-iconfont/min-iconfont"

}

然后A页面引入的其他样式文件如button.wxss中的伪元素会受到影响,不会正常显示其原有的样式,去掉A.json文件中引用自定义组件的代码后，button.wxss的样式显示正常。但是button.wxss中的其它常用的非伪元素样式则不受影响。

比如使用:after伪元素不会显示其中data-label属性的value值，去掉引用自定义组件代码后，data-label属性的value值正常显示

.speed-dial-button[data-label]:after {

content: attr(data-label);

position: absolute;

/* left: 0; */

top: 50%;

transform: translate3d(0, -50%, 0);

padding: 4px 10px;

font-size: 12px;

background: rgba(0, 0, 0, 0.4);

border-radius: 3px;

color: rgba(255, 255, 255, 0.8);

pointer-events: none;

white-space: nowrap;

opacity: 0;

box-sizing: border-box;

transition: all 0.3s;

}

.speed-dial-opened .speed-dial-button[data-label]:after {

opacity: 1;

}

折腾了很长时间不知道是怎么回事，求大神指导

10 回复

gang151 楼6 年前

在页面中使用时，属性选择器也无法选中自定义组件节点。应当采用类选择器。

li492 楼6 年前

我的情况是引用了自定义组件usingComponents后会对页面中调用的其它样式中的伪元素中的属性选择器产生影响，对其它的样式不会产生影响，有且仅有带有属性选择器的伪元素会受到影响，形如.class:after[label=‘test’]{}这种会有影响，其它样式不受影响。去掉usingComponents之后会恢复原来样式的效果，目前官方可能不会对其做出修改，用其它非伪元素替代即可