深度作用选择器

深度作用选择器/deep/

   在项目中，我们会经常使用一些UI框架或组件库中已经封装好的组件，但是到了实际应用场景，往往需要对这些组件作一定的处理，他们原本的样式往往不是我们项目所需要的，因此就需要我们对这些封装好的组件作定制化处理，那应该怎么来处理呢，以下我来讲解。

 这些框架或组建的样式定义在全局中，我们尽管在style中定义了样式，也会出现不生效的情况，那是因为style中的局部样式和全局样式发生重叠，编译器会优先选择全局样式来渲染页面，故

推荐解决方法：

1、使用内联样式，最直接方法，内联样式的优先级为1000，而类选择器优先级为100，远远大于类选择器的级别，快速将样式渲染到DOM中。

 

2、使用深度选择器，在style中定义选择器，在其前加上/deep/ 字段，因此就会变成深度选择器，这样就可以在原已封装好的组件作进一步地覆盖处理，将组件根据需求进行定制化处理，达到想要的效果。

例如以下写法:

/deep/.faceMode {
background-color:antiquewhite
}

 

Tips:

这里填补一下选择器的优先级

内联样式 > id选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器