【scoped属性选择器与深度选择器】

scoped属性选择器

1、 scoped属性的作用：-----------------只对当前的组件规定样式

• 对于某一个组件，如果style添加了scoped属性，相当于给当前子组件的结构中都添加了一个data-v-xxx自定义属性，eg：h3【data-v-7babd90】
• 相当于vue通过属性选择器，給需要添加的元素添加样式

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

深度选择器

• 使用场景：父组件有样式（scoped），而且还想影响到子组件的样式，用~，可以实现样式穿透。

• 常用写法：

1、原生CSS 用>>>

//在父组件里写的style,子组件也会被穿透，有h3的部分
<style scoped>
 >>>h3{
 		color:red;
	  }
</style>

2、less 用 /deep/

3、scss 用 ::v-deep