vue組件中的style標籤標有scoped屬性時代表style裏的css樣式只適用於當前組件元素 。接下來經過本文給你們分享vue組件中的樣式屬性scoped實例詳解css
**Scoped CSS**html
Scoped CSS規範是Web組件產生不污染其餘組件,也不被其餘組件污染的CSS規範。前端
vue組件中的style標籤標有scoped屬性時代表style裏的css樣式只適用於當前組件元素
它是經過使用PostCSS來改變如下內容實現的:vue
<style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template>
渲染結果:sass
<style> .example\[data-v-f3f3eg9\] { color: red; } </style> <template> <div class="example" data-v-f3f3eg9>hi</div> </template>
混合使用全局屬性和局部屬性app
<style> /\* global styles */ </style> <style scoped> /\* local styles */ </style>
關於子組件的根元素less
使用了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裏會報錯
結語
感謝您的觀看,若有不足之處,歡迎批評指正。