【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
洗尽铅华始见金,褪去浮华归本真