【CSS】深度选择器（vue中scoped下使用样式穿透）

1.Vue模板中style的scoped属性的作用：加上scoped后只作用于当前的组件有用（样式）

对于某一个组件，如果style添加上scoped属性，给当前子组件的结构都接天上一个data-v-xxxx自定义属性

会发现vue是通过属性选择器，给需要添加的元素添加上样式

h3[data-v-3cs9ob77]

 

2.子组件的标签（拥有父组件当中自定义属性：一样的），如果子组件的根节点，和父组件中书写的样式相同，也会添加上相应的样式

 

3.如果父组件的样式（scoped），而且还想影响到子组件的样式？这种情况可以用深度选择器（穿透样式）

 

>>>  一般用于原生CSS

/deep/ 一般用于less

 ::v-deep 一般用户scss