如何設定css作用域

在css中，可以使用scoped屬性來設定作用域；當style標籤有scoped屬性時，它的CSS只會作用於目前元件中的元素。不過一個子組件的根節點會同時受到其父作用域的CSS和子組件有作用域的CSS的影響。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

初接觸Vue單文件，對style標籤裡的scoped屬性難免有一點困惑，畢竟之前沒有用到過，下面是關於scoped的一些講解。

一個標準的.vue檔案是這樣的：

// html内容区域
<template>
  <div class="hello">
    <h1 id="nbsp-msg-nbsp">{{ msg }}</h1>
  </div>
</template>

//相关数据及事件区域，通俗说就是我们写JS代码的地方
<script>
export default {
  name: &#39;HelloWorld&#39;,
  data () {
    return {
      msg: &#39;Welcome to Your Vue.js App&#39;
    }
  }
}
</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中文網其他相關文章！