CSS作用域(样式分割)的使用
在vue中,让css样式只在当前组件中生效:scoped
属性是 HTML5 中的新属性,是一个布尔属性,如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。
二、scoped的实现原理
vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码:
<style scoped>
.test {
color: blue;
}
</style>
<template>
<div class="test">Hi world</div>
</template>
转译后:
<style>
.test[data-v-5559930f] {
color: blue;
}
</style>
<template>
<div class="test" data-v-5559930f>Hi world</div>
</template>
PostCSS给一个组件中的所有DOM添加一个独一无二的动态属性,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中的DOM,这种做法使得样式只作用于含有该属性的DOM<组件内部DOM>。
三、scoped穿透方法
在很多项目中,当引用第三方组件,需要再组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。这时就需要采用一些特殊的方式来进行穿透scoped。
- 方法一: 使用>>>可以穿透scoped属性,修改其他第三方组件样式。
- 方法二: 使用两个
style
标签,一个带scoped
属性,一个不带scoped
属性,用来修改第三方组件的样式。
- 方法三: 使用sass或less的样式穿透
/deep/
- 方法四: 通过在最外层加
id
或者class
的形式进行区分。