css一直有個使人困擾的做用域問題:即便是模塊化編程下,在對應的模塊的js中import css進來,這個css仍然是全局的。爲了不css樣式之間的污染,vue中引入了scoped這個概念。css
在vue文件中的style標籤上,有一個特殊的屬性:scoped。當一個style標籤擁有scoped屬性時,它的CSS樣式就只能做用於當前的組件。經過設置該屬性,使得組件之間的樣式不互相污染。若是一個項目中的全部style標籤所有加上了scoped,至關於實現了樣式的模塊化。vue
可是這些樣式又是如何實現不相互影響呢?編程
vue中的scoped 經過在DOM結構以及css樣式上加惟一不重複的標記:data-v-hash的方式,以保證惟一(而這個工做是由過PostCSS轉譯實現的),達到樣式私有化模塊化的目的。bash
總結一下scoped三條渲染規則:dom
上個栗子。轉譯前:模塊化
<style lang="scss" scoped>
.test {
background: blue;
span{
color:red;
}
}
</style>
<template>
<div class="test">
<span>hello world !</span>
</div>
</template>
複製代碼
轉譯後:ui
<style lang="css">
.test[data-v-ff86ae42] {
background: blue;
}
.test span[data-v-ff86ae42]{
color: red;
}
</style>
<template>
<div class="test" data-v-ff86ae42>
<span data-v-ff86ae42>hello world !</span>
</div>
</template>
複製代碼
能夠看出:PostCSS會給一個組件中的全部dom添加了一個獨一無二的動態屬性data-v-xxxx,而後,給CSS選擇器額外添加一個對應的屬性選擇器來選擇該組件中dom,這種作法使得樣式只做用於含有該屬性的dom——組件內部dom, 從而達到了'樣式模塊化'的效果.spa
可是,在作項目中,會遇到這麼一個問題,即:引用了第三方組件,須要在組件中局部修改第三方組件的樣式,而又不想去除scoped屬性形成組件之間的樣式污染。那麼有哪些解決辦法呢?code
<style lang="scss">
/*添加要覆蓋的樣式*/
</style>
<style lang="scss" scoped>
/* local styles */
</style>
<!--vue官網中提到:一個 .vue 文件能夠包含多個style標籤。因此上面的寫法是沒有問題的。-->
複製代碼
<template>
<div class="box">
<dialog></dialog>
</div>
</template>
<!--使用 >>>或者 /deep/ 操做符(Sass 之類的預處理器沒法正確解析 >>>,可使用/deep/)-->
<style lang="scss" scoped>
.box {
/deep/ input {
width: 166px;
text-align: center;
}
}
</style>
或者
<style lang="scss" scoped>
.box >>> input {
width: 166px;
text-align: center;
}
}
</style>
複製代碼
但願能幫助遇到一樣問題的你,thanks!作用域