在css中，可以使用scoped屬性來設定作用域；當style標籤有scoped屬性時，它的CSS只會作用於目前元件中的元素。不過一個子組件的根節點會同時受到其父作用域的CSS和子組件有作用域的CSS的影響。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
初接觸Vue單文件，對style標籤裡的scoped屬性難免有一點困惑，畢竟之前沒有用到過，下面是關於scoped的一些講解。
一個標準的.vue檔案是這樣的：
// html内容区域
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</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;
}登入後複製
效果圖：
從高度可以看得到，樣式已經作用到子元件裡面了。我知道你可能要問，沒有看到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作用域的詳細內容。更多資訊請關注PHP中文網其他相關文章！
