在使用 CSS 样式时,有时候我们希望修改子组件中的样式,但是由于 CSS 的层叠规则,子组件的样式可能会被父组件的样式所覆盖。这时可以使用 CSS 样式穿透(CSS style piercing)来解决这个问题。
CSDN上面大多数都是使用
.parent >>> .child {
/* 在父组件中使用 >>> 选择器穿透到子组件中 */
}
.parent /deep/ .child {
/* 在父组件中使用 /deep/ 选择器穿透到子组件中 */
}
::v-deep .child {
/* 在全局样式中使用 ::v-deep 选择器穿透到子组件中 */
}
:deep(.child){
/* 在全局样式中使用 :deep() 选择器穿透到子组件中 */
}
这四种样式穿透怎么说呢,时好时坏,而且 >>> 和 /deep/ 它们在 CSS 规范中被废弃了,而另外俩种使用起来也不稳定,再次我推荐另一种,嘎嘎好用
.parent {
@at-root .child{
}
}
@at-root 指令不仅可以在sass文件里面使用还可以在vue组件里面使用,而v-deep只能在vue组件里面使用
so 那个好用就不用我说了吧