vue組件中的style標籤標有scoped屬性時表明style裏的css樣式只適用於當前組件元素 。接下來通過本文給大家分享vue組件中的樣式屬性scoped實例詳解
**Scoped CSS**
Scoped CSS規範是Web組件產生不污染其他組件，也不被其他組件污染的CSS規範。
vue組件中的style標籤標有scoped屬性時表明style裏的css樣式只適用於當前組件元素
它是通過使用PostCSS來改變以下內容實現的:
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
渲染結果：
<style>
.example\[data-v-f3f3eg9\] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
混合使用全局屬性和局部屬性
<style>
/\* global styles */
</style>
<style scoped>
/\* local styles */
</style>
關於子組件的根元素
使用了scoped屬性之後，父組件的style樣式將不會滲透到子組件中，然而子組件的根節點元素會同時被設置了scoped的父css樣式和設置了scoped的子css樣式影響，這麼設計的目的是父組件可以對子組件根元素進行佈局。 .vue模板中的樣式是根據需要按需加載，訪問一個頁面該組件中的樣式就會追加到head標籤中，如果父子組件中都對某個子組件根節點元素進行了控制，則父組件裏的樣式會被後來的覆蓋。
深選擇器
如果想對設置了scoped的子組件裏的元素進行控制可以使用'>>>'或者'deep'
<template>
<div id="app">
<gHeader></gHeader>
</div>
</template>
<style lang="css" scoped>
.gHeader /deep/ .name{ //第一種寫法
color:red;
}
.gHeader >>> .name{ //二種寫法
color:red;
//歡迎加入全棧開發交流圈一起學習交流：864305860
//面向1-3年前端人員
//幫助突破技術瓶頸，提升思維能力
}
</style>
<div class="gHeader">
<div class="name"></div>
</div>
一些預處理程序例如sass不能解析>>>屬性，這種情況下可以用deep，它是>>>的別名，工作原理相同。
動態生成的內容
使用v-html動態創建的DOM內容，不受設置scoped的樣式影響，但你依然可以使用深選擇器進行控制
下面給大家補充下vue中使用v-html加載的富文本，css中定義樣式不生效
如題，使用v-html加載一段富文本，富文本里包含圖片，在手機上圖片寬度可能會溢出
<div v-html="htmlContent" class="rich"></div>
<style scope>
.rich>>> img{ display:block; max-width: 100%}
</style>
注意：這裏的>>>需要使用css語法，寫在less裏會報錯
結語
感謝您的觀看，如有不足之處，歡迎批評指正。