样式穿透(>>>和 /deep/以及 ::v-deep 三者之间的区别)

1.>>>

深度作用选择器的简写形式,如果想修改element-ui某个深层元素可以用深度作用选择器(因为element-ui进行了封装,正常使用类名样式不会发生改变,要想修改成规定的样式,就需要使用深度选择器),直接使用 >>> 穿透进行样式修改

  1. 只作用于css,不支持css预加载器(less/scss)
  2. 适用于Vue2.x版本,Vue3.x版本使用会报错

2./deep/

Vue2.x的深度作用选择器正确写法

  1. 仅适用于Vue2.x版本
  2. 支持css预加载器

3.::v-deep

Vue3.x的深度作用选择器正确写法

总结

Vue2.x版本使用优先级 /deep/ 或者 >>>
Vue3版本使用::v-deep

你可能感兴趣的:(css)