css: deep深度作用选择器

前言

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，不会影响到子组件（非根结点）的样式。

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

原理

在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么就使得当前组件内的样式只会作用于当前组件内的元素。

例子

值得注意的是,当父组件，子组件同时使用scoped属性时，子组件最外层的标签既会被加上当前组件的hash值，又会加上父级组件的hash值

若父组件样式添加scoped，父组件的所有标签则添加hash：

<div data-v-b45036b2></div>

各自带有自己组件的hash，子组件除了有自己的hash之外，还带上了父组件的hash，子组件最外层标签：

 <div data-v-b45036b2 data-v-384b136e ></div></