CSS作用域（樣式分割）的使用匯總
我要評(píng)論一、CSS作用域（樣式分割）的使用
在vue中，讓css樣式只在當(dāng)前組件中生效：scoped 屬性是 HTML5 中的新屬性，是一個(gè)布爾屬性，如果使用該屬性，則樣式僅僅應(yīng)用到 style 元素的父元素及其子元素。
二、scoped的實(shí)現(xiàn)原理
vue中的scoped屬性的效果主要通過(guò)PostCSS轉(zhuǎn)譯實(shí)現(xiàn)，如下是轉(zhuǎn)譯前的vue代碼：
<style scoped>
.test {
color: blue;
}
</style>
<template>
<div class="test">Hi world</div>
</template>
轉(zhuǎn)譯后：
<style>
.test[data-v-5559930f] {
color: blue;
}
</style>
<template>
<div class="test" data-v-5559930f>Hi world</div>
</template>
PostCSS給一個(gè)組件中的所有DOM添加一個(gè)獨(dú)一無(wú)二的動(dòng)態(tài)屬性，然后，給CSS選擇器額外添加一個(gè)對(duì)應(yīng)的屬性選擇器來(lái)選擇該組件中的DOM，這種做法使得樣式只作用于含有該屬性的DOM<組件內(nèi)部DOM>。
三、scoped穿透方法
在很多項(xiàng)目中，當(dāng)引用第三方組件，需要再組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。這時(shí)就需要采用一些特殊的方式來(lái)進(jìn)行穿透scoped。
方法一： 使用>>>可以穿透scoped屬性，修改其他第三方組件樣式。
方法二： 使用兩個(gè)style標(biāo)簽，一個(gè)帶scoped屬性，一個(gè)不帶scoped屬性，用來(lái)修改第三方組件的樣式。
方法三： 使用sass或less的樣式穿透 /deep/
方法四： 通過(guò)在最外層加 id或者 class的形式進(jìn)行區(qū)分。
到此這篇關(guān)于CSS作用域（樣式分割）的文章就介紹到這了,更多相關(guān)CSS作用域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css實(shí)現(xiàn)文章分割線樣式的多種方法總結(jié)
這篇文章主要介紹了css實(shí)現(xiàn)文章分割線樣式的多種方法總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一2021-04-20