关于深度选择器/deep/(::v-deep)和>>>
深度选择器为什么出现?在使用vue开发时组件私有化样式时使用scoped实现,此时我们使用普通的方式修改第三方库某些样式,如elementui组件的样式是不生效的。原因是scoped会自动在元素上添加一段特殊的标识,如:v-data-254811...等。使用>>><style scoped>#app >>> a {color: red}</s
·
深度选择器为什么出现?
在使用vue开发时组件私有化样式时使用scoped实现,此时我们使用普通的方式修改第三方库某些样式,如elementui组件的样式是不生效的。原因是scoped会自动在元素上添加一段特殊的标识,如:v-data-254811...等。
使用>>>
<style scoped>
#app >>> a {
color: red
}
</style>
但是如果你使用了css预处理器,如less、sass、stylus,这些预处理器无法正确解析>>>,此时就需要用下面的方法进行替代
/deep/和::v-deep
<style scoped lang="scss">
#app {
/deep/ a {
color: rgb(16, 140, 172)
}
::v-deep a {
color: rgb(118, 211, 110)
}
}
</style>
关于/deep/在谷歌浏览器提示警告
更多推荐
已为社区贡献13条内容
所有评论(0)