你不知道的CSS– >>> /deep/穿透


解决Scoped CSS内想修改组件库组件样式问题:

分析:Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值,这样父组件的样式就不会影响到子组件了

解决方案:

  • 提取一个公共文件,在公共文件里面修改样式

存在问题:别人和你使用相同的组件,但并不想用你修改后的样式。当然,你们可以强行给自己的元素加一个独特的类名,或者尝试自己封装一个组件,但是都不太现实,所以就需要有一个方法,既不影响到别的地方,又能修改子组件在当前的样式。

  • 使用>>>穿透scoped
& >>> .swiper-container {
    overflow: visible;
 }

.question[data-v-0b9a2966]表示子组件使用了scoped
注意:有些预编译器不支持>>>,可以使用/deep/

& /deep/ .swiper-container {
    overflow: visible;
 }