2021年前端知识点提炼：八月份

一、Vue中深度作用选择器，有作用域的 CSS

规则一： 使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

• 引出场景一：在组件中用了第三方组件，但是第三方组件class样式需要我们重新定制，比如我们引入了ElementUI组件库，我们需要对使用的组件中存在的class="el-form-item__label"样式进行修改，这时我们直接对el-form-item__label进行样式修改是不行的。
• 解决方案1：
• 解决方案2：有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 ::v-deep 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。
• 场景一的应用：
• 场景一的原理：实际就是对el-form-item__label样式前加上了[data-v-30be3d08]属性，这个属性和scoped生成的属性一致，这样才做到深度作用。