scoped私有作用域和deep selector深度作用选择器

私有作用域

在标签上添加scoped属性,可以使样式只在当前组件生效,样式私有化,避免影响其他的组件,造成全局污染。




原理:

上述代码会通过PostCSS转换成:




通过给一个组件中的所有dom节点添加了一个唯一的data属性,并且给css选择器添加当前组件对应的data属性选择器来私有化样式。

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得更深,影响到子组件,你可以使用 深度作用选择器>>>。


上述代码会转换成:

.a[data-v-f3f3eg9] .b { /* ... */ }

因为后面的那个类没加组件的data属性选择器,所以就能选到子组件里面的类了

别名

/deep/是>>>的别名,有些像 Sass,Less 之类的预处理器无法正确解析 >>>,所以使用/deep/代替


应用

平时写项目肯定会用第三方的组件,比如iview,element-ui,mint-ui,vux-ui,swiper等等,想要修改第三方组件的样式,但又不想去掉scoped属性,影响别的组件。

方式一

使用深度作用选择器:


方式二

一个组件中可以使用多个style,同时使用有 scoped 和非 scoped 样式:




提示

表层的一些样式,比如你在HTML页面中写出来标签的那些,如果加类名就可以实现修改样式,没必要使用深度选择器

文档

scoped

你可能感兴趣的:(scoped私有作用域和deep selector深度作用选择器)