永康做网站的公司/福州网站建设
问题:两个页面同用一个scss样式文件(因为代码超级长)
第一个页面如图:
鼠标移出按钮,默认是会改变背景色的,我指的是取消按钮,然后我使用了
/deep/ :nth-child(1).el-botton:hover {background-color: #fff;
}
这个在第一个页面是可以满足需求的
第二个页面如图:
明显实现不了了,鼠标移入保存按钮,背景色变成了白色。
于是想到交集选择器(标签和类名构成)
/deep/ button.cancelBtn:hover {background-color: #fff;
}
这样既不影响其他页面,也可以实现需求!(没有样式影响的情况下,按钮背景色为白色的时候鼠标移入才改变背景色)
二、使用vant组件的时候,覆盖样式使用>>>,可以在当前组件下使用scoped
<style scoped>.a >>> .b { /* ... */ }
</style>
编译成:
.a[data-v-f3f3eg9] .b { /* ... */ }
三、最近新出了一种覆盖ui组件样式的方法:(注意:如果你使用了Less或Sass等预处理器,可能无法>>>正确解析。在这些情况下,您可以使用组合/deep/或::v-deep组合 - 两者都是别名,>>>并且工作完全相同。
使用Less或Sass等预处理器的写法如下:)
.van-radio {/deep/ .van-radio__label {width: 500px;}
}
.van-radio {::v-deep .van-radio__label {width: 500px;}
}
慢慢来,慢慢来,你看我还有机会吗?