Vue2之深度选择器

深度选择器

对于某个组件，如果style添加上scoped属性，给当前子组件结构中都添加上一个data-v-xxxx的自定义属性，就会发现Vue其实是通过属性选择器来完成对需要添加的元素添加上样式的操作的：

<div data-v-13877386>
</div>

看上去好像是这么回事，那么是不是就可以得出结论，只要在需要限制样式的作用范围的组件中使用scoped就可以万无一失了呢？

答案显然不是这样~

看一个例子（假设父组件有p {color:red} 的scoped样式，子组件有p {font-size:20px}的scoped样式）：

<div data-v-7ba5bd90 id="app">
    <p data-v-7ba5bd90 >父组件的元素</p>
    <div data-v-469af010 data-v-7ba5bd90 >
        <p data-v-469af010 >我是子组件的元素</p>
    </div>
</div>

上面子组件的root标签拥有父组件当中的自定义属性,父组件和子组件都使用了scoped属性，看起来样式好像确实是互相独立的，但实际上也是如此（哈哈

但下面的例子就不一样了：

<div data-v-7ba5bd90 id="app">
    <p data-v-7ba5bd90 >父组件的元素</p>
    <p data-v-469af010 data-v-7ba5bd90>我是子组件的元素</p>
    </div>
</div>

在这里，子组件不由div盒子包裹，而是一个单独的p构成，这时候，p元素上面的两个属性就会同时被父组件与子组件的样式匹配到，造成了即使双方都添加了scoped属性，子组件也会体现出父组件的样式

但是，以上的情况只能影响到子组件的顶层元素（单独包裹的元素）,在实际使用中并没有什么作用（（（

有时候，我们还是想让父组件 (也是scoped) 样式的效果影响到子组件中的 某一类 元素，那应该怎么做呢？

这种情况就可以把我们的深度选择器请出来了：

<!--css3写法-->
<style scoped>
>>> p {
  color: red;
}
</style>

<!--less写法-->
<style lang="less" scoped>
/deep/ p {
  color: red;
}
</style>

<!--scss写法-->
<style lang="scss" scoped>
:deep(p) {
  color: red;
}
</style>

父组件只需要这样写，就可以让指定的元素的样式穿透子组件