温顾而知新：css样式中scoped和deep的原理

scoped属性

作用

用作样式隔离，使自身组件样式不会影响到其他组件

原理

会在组件中每个标签元素上添加一个唯一的data-v-hash属性，组件内所生成的css样式就都会带着这个属性选择器，这样样式查找时就可以对应匹配到。

1. 子组件只有一个根元素

父组件生成的data-v-hash会添加到子组件的根元素上，这样子组件根元素就同时有两个data-v-hash属性，如果父组件中同样有子组件根元素的样式声明，那么会覆盖子组件内的样式，因为选择器权值相同时，父组件的优先级更高。

2. 子组件有多个根元素

父组件生成的data-v-hash不会被添加到子组件的任何元素上

在vue2中由于组件必须有一个根元素，所以父组件的data-v-hash属性会被添加到子组件的根元素上，导致子组件根元素有两个data-v-hash属性，而vue3可以有多个根元素，就不会存在这种情况。

样式穿透

对于很多第三方的UI组件库，有时我们需要修改其样式达到我们想要的效果，由于scoped的影响直接编写同名样式时，是覆盖不了组件内的样式的，可以通过如下两种方式来处理

::v-deep

使用v-deep的原理是，取消了该选择器中的属性选择器，这样就能匹配到子组件的内部标签，有时可能结合!important一起使用

style标签

在子组件中除了使用scoped属性进行样式隔离外，如果不希望样式隔离，可以再写一个style标签，不加scoped属性，这样就会对其他组件的样式造成影响，使用时需要注意。