Vue-CSS样式穿透

---

什么是CSS样式穿透

所谓的穿透，官方叫做深度选择器。
如果引入了其它组件，然后通过dom节点上的选择器来改变这个组件的一些样式，但是修改了不会生效
原因是<style scoped>中的scoped所致,当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

<template>
    <div id="app">
     <box1></box1>
     <box2></box2>
    </div>
</template>
<script>
        export default {
        components:{
            box1:()=>import("@/views/login/views/box1.vue"),
            box2: () => import("@/views/login/views/box2.vue"),
        }
  };
</script>
<style scoped>
  #app .box1{
    color: black;
   }
   #app .box2{
    color: green;
   }
</style>

发现颜色并没有修改

此时需要样式穿透，需要用到深度选择器。

<style scoped>
  #app >>> .box1{
    color: black;
   }
   #app >>> .box2{
    color: green;
   }
</style>

这时就修改成功了

再不同的预处理器中样式穿透也不一样

css可以使用>>>，/deep/，::v-deep
less和node-sass可以使用/deep/，::v-deep
dart-sass可以使用::v-deep
所有的都能使用:deep()