怎么設置css作用域
這篇文章主要講解了“怎么設置css作用域”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么設置css作用域”吧！
專注于為中小企業提供網站制作、網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業慈溪免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了上千余家企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。
在css中，可以使用scoped屬性來設置作用域；當style標簽有scoped屬性時，它的CSS只作用于當前組件中的元素。不過一個子組件的根節點會同時受到其父作用域的CSS和子組件有作用域的CSS的影響。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
初接觸Vue單文件，對style標簽里的scoped屬性難免有一點困惑，畢竟之前沒有用到過，下面是關于scoped的一些講解。
一個標準的.vue文件是這樣的：
// html內容區域
<template>
<div class="hello">
<h2>{{ msg }}</h2>
</div>
</template>
//相關數據及事件區域，通俗說就是我們寫JS代碼的地方
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
// CSS樣式區域
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello { color: #efefef; }
</style>可以看到在style標簽里面有一個scoped屬性，當style標簽有scoped屬性時，它的CSS只作用于當前組件中的元素。這類似于shadow DOM中的樣式封裝。它有一些注意事項，但不需要任何的Profill。它通過使用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> /* 全局樣式 */ </style> <style scoped> /* 本地樣式 */ </style>
子元素樣式是子元素的根元素和子組件內CSS共同作用的結果
使用scoped后，父作用域的樣式將不會滲透到子組件中。不過一個子組件的根節點會同時受到其父作用域的CSS和子組件有作用域的CSS的影響。這樣設計是為了讓父組件可以從布局的角度出發，調整其子組件根元素的樣式，示例如下：
子組件
<template>
<div class="wrap">
<p>Hello world</p>
</div>
</template>
<style scoped>
.wrap {
color: #ffffff;
background: #666666;
}
</style>父組件
<template>
<div class="wrap">
//ChildMOdul為上面的子組件
<ChildModul/>
</div>
</tamplate>
<style scoped>
//子組件根元素樣式
.wrap {
margin: 0 10px
}
</style>子組件中定義了一個背景色為#efefef顏色為#ccc的樣式，在父元素中，為子組件的根元素定義了一個左右為10px的邊框，而子模塊最終表現出來的樣式是這樣的：
從上圖可以看出，子組件的樣式是父組件中子組件根元素和子組件中scoped中CSS樣式共同作用的結果。
深度作用選擇器
如果你希望scoped樣式中的一個選擇器能夠作用的“更深”，例如影響子組件，你可以使用>>>操作符：
<style scoped>
.a >>> .b { /* ... */ }
</style>上述代碼將會編譯成：
.a[data-v-f3f3eg9] .b { /* ... */ }有些像Sass之類的預處理器無法正確解析>>>。這種情況下可以使用/deep/操作符取而代之–這是一個>>>的別名，同樣可以正常工作。試著用之前的代碼，使用深度作用選擇器在父組件中設置子組件的樣式：
父組件
.wrap /deep/ .child--css {
font-size: 36px;
}效果圖：.jpg)
從高度可以看得到，樣式已經作用到子組件里面了。我知道你可能要問，沒有看到Sass預選擇器，為什么用的是/deep/而不是>>>,這個其實我也不知道，先用了>>>沒有用，然后換了使用/deep/，樣式是有效果的。說句不負責任的話，如果>>>沒作用，就換成/deep/吧，反正目的是讓父組件里寫的樣式能滲透到子組件。。。
動態生成的內容
通過v-html創建的DOM內容不受作用域內的樣式的影響。但是你仍然可以通過深度作用選擇器為它們設置樣式。
需留意事件
CSS作用域不能代替class：考慮到瀏覽器渲染各種CSS選擇器的方式，當p{ color: red } 設置了作用域時（即與特性選擇器組合使用時）會慢很多倍。如果你使用class或者id取而代之，比如.example { color: red },性能影響就會消除。
在遞歸組件中小心使用后代選擇器對選擇器.a .b中的CSS規則來說，如果匹配 .a的元素包含一個遞歸子組件，則所有的子組件中的.b都將被這個規則匹配。
感謝各位的閱讀，以上就是“怎么設置css作用域”的內容了，經過本文的學習后，相信大家對怎么設置css作用域這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！
文章題目：怎么設置css作用域
標題來源：http://m.kartarina.com/article30/pgocpo.html
成都網站建設公司_創新互聯，為您提供ChatGPT、定制網站、外貿網站建設、手機網站建設、Google、App設計
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
