1.Vue中的style標(biāo)簽上有一個(gè)特殊的屬性scoped膏蚓。當(dāng)style標(biāo)簽擁有scoped屬性時(shí)候畸写，它的css樣式只能作用于當(dāng)前的Vue組件驮瞧，防止組件之間污染枯芬。
2.PostCSS給一個(gè)組件中的所有dom添加了一個(gè)獨(dú)一無(wú)二的動(dòng)態(tài)屬性论笔，給css選擇器額外添加一個(gè)對(duì)應(yīng)的屬性選擇器千所，這種做法使得樣式只作用于含有該屬性的dom元素狂魔。
轉(zhuǎn)譯前
<style scoped>
.eg{
color:red;
}
</style>
<template>
<div class="eg">scoped測(cè)試</div>
</template>
轉(zhuǎn)譯后
.eg[data-v-5555666a] {
color: red;
}
<template>
<div class="eg" data-v-5555666a>scoped測(cè)試</div>
</template>
3.scoped穿透
普通css的樣式穿透 使用>>>
//外層 >>> 第三方組件
.wrap>>> .el-input__inner{
height: 1rem;
}
sass和less的樣式穿透 使用/deep/
//外層 /deep/ 第三方組件
.wrap /deep/ .el-input__inner{
height: 1rem;
}
其他方法
1.在vue組件中使用兩個(gè)style標(biāo)簽淫痰，一個(gè)加scoped屬性，一個(gè)不加scoped屬性待错，把需要覆蓋的css樣式寫(xiě)在不加scoped屬性的style標(biāo)簽中籽孙。
2.建一個(gè)css文件火俄，里面寫(xiě)覆蓋的css樣式，在入口文件main.js 中引入瓜客。
3.在vue組件中不使用scoped屬性适瓦。
原文作者：匆匆那年_海，博客主頁(yè)：http://www.reibang.com/u/910c0667c515
95后前端漢子玻熙，愛(ài)編程、優(yōu)秀嗦随、聰明、理性称杨、沉穩(wěn)肌毅、智慧的程序猿一枚姑原。
