一文搞懂scoped原理，属性选择器，深度选择器

阅读本文将了解到以下内容:

1. vue中style标签上scoped的作用
2. scoped实现的原理（属性选择器）
3. 如何使用深度选择器穿透

1.vue中style标签上scoped的作用

scoped的作用是限制style标签内css样式只作用于当前组件下，不污染全局样式

<style lang="scss" scoped>
    *{
        background: #222;
    }
</style>

2.scoped实现的原理（属性选择器）

vue-loader编译的阶段会给页面上的dom元素添加data-v-hash属性，并且会给css选择器添加对应的属性选择器，实现scoped样式只在当前组件内生效的效果

3.如何使用深度选择器穿透

由于scoped限制，css不会修改子组件样式，深度选择器提供了解决方案

使用场景： 想要修改第三方组件样式，但又不想污染全局样式时，可以通过scoped+深度选择器的方式

四种深度选择器：>>>，/deep/，::v-deep，:deep()，建议使用第四种

深度选择器将属性选择器置前来实现样式穿透

over