你不知道的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;
 }