相信做前端的小伙伴们肯定遇到过一个css属性污染全局样式的可怕事情。

比如今天刚做好一个漂亮的页面，明天打开电脑，样式全变了，整个人心情都不好了。

所以今天咱们聊一聊style标签的scoped属性和deep深度作用选择器。

为了解决这个问题vue提出了页面的模块化和模板组件化的思想。也就是把界面进行模块化划分，每一部分都可以作为一个独立的模块，然后拼成一个完整的界面。

经常使用的模块可以进行封装，作为通用的组件。四不是很方便

那么scoped属性到底是个什么东西呢？

Scoped属性起源

在模块化编程下，为了模块之间样式不互相污染所以vue中引入了scoped的概念。

在vue的组件中，style标签使用scoped标签后，定义的样式仅作用在当前组件内部，从而避免了污染其他组件。这样从某种意义上就体现了模块化的思想。

那么vue是怎么实现style标签的scoped化的呢？

Scoped的原理

Vue中实现style标签的scoped化，是通过标签的私有化来实现的。

Vue通过在DOM节点上以及相应css样式上添加不重复的唯一标识data-v-hash的方式，来保证DOM节点和css样式的唯一性，从而实现模块的私有化。

Vue的css样式是通过PostCSS进行转译实现的。Scoped渲染遵循以下规则：

• 1. 将DOM节点添加唯一标识data属性，例如data-v-12fca125，来保持唯一性

• 2. 将转译后的css样式，每一条属性结尾添加data标识（[data-v-12fca125]），从而保证和DOM节点进行匹配并且私有化样式。

• 3. 若组件内部引用其他组件，则仅给组件的最外层添加data标识。

举个栗子

原始样式：

编译后的样式：

穿透scoped样式

实际项目中经常会组件中引用其他通用组件，那么在父组件中直接修改子组件的样式是不能实现子组件样式变化的，而又不想去掉scoped属性。

那怎么办呢？

所以深度作用选择器deep就派上用场了，可以在父组件内使用/deep/来穿透scoped样式，从而控制子组件样式。

父组件使用deep前：

父组件使用deep后：

修改iview中组件的样式

在使用第三方组件库时也会经常遇到另外一个问题，即第三方组件库进行渲染的时候仅最外层加上了data值，其内部的标签没有data值，那么如果要修改组件内部的样式，使用deep深度选择器也不起作用了。

那怎么办呢？

想到了最简单的方法，就是使用css样式覆盖，组件内建立一个不添加scoped属性的style标签。这样就可以直接进行控制样式了。

但是这样又会产生一个新的问题，如果在其他模块内也使用了此组件，组件的样式就受到了之前模块的影响了。

为了解决这个问题，需要在模块内覆盖样式的时候，在样式的前面加上一个组件外层div的唯一id就可以了。

例如：

.tabsContent .ivu-tabs-bar{

border-bottom: none !important;

}

小结

通过介绍vue模块化使用scoped属性的原理，来进行模块的私有化，从而避免了模块之间样式的污染。如果组件内使用其他组件可以通过deep深度选择器进行控制子组件的样式。最后介绍了修改iview中组件内部样式的方法。

技术积累需要一点一滴，每天学一点，会发现不一样的自己。

感兴趣的朋友，请点击关注。