怎么設置css作用域

這篇文章主要講解了“怎么設置css作用域”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么設置css作用域”吧！

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

本教程操作環(huán)境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

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

一個標準的.vue文件是這樣的：

// html內容區(qū)域
<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
  </div>
</template>

//相關數據及事件區(qū)域，通俗說就是我們寫JS代碼的地方
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

// CSS樣式區(qū)域
<!-- 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后，父作用域的樣式將不會滲透到子組件中。不過一個子組件的根節(jié)點會同時受到其父作用域的CSS和子組件有作用域的CSS的影響。這樣設計是為了讓父組件可以從布局的角度出發(fā)，調整其子組件根元素的樣式，示例如下：

子組件

<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/吧，反正目的是讓父組件里寫的樣式能滲透到子組件。。。

動態(tài)生成的內容

通過v-html創(chuàng)建的DOM內容不受作用域內的樣式的影響。但是你仍然可以通過深度作用選擇器為它們設置樣式。

需留意事件

• CSS作用域不能代替class： 考慮到瀏覽器渲染各種CSS選擇器的方式，當p{ color: red } 設置了作用域時（即與特性選擇器組合使用時）會慢很多倍。如果你使用class或者id取而代之，比如.example { color: red },性能影響就會消除。

• 在遞歸組件中小心使用后代選擇器對選擇器.a .b中的CSS規(guī)則來說，如果匹配 .a的元素包含一個遞歸子組件，則所有的子組件中的.b都將被這個規(guī)則匹配。

感謝各位的閱讀，以上就是“怎么設置css作用域”的內容了，經過本文的學習后，相信大家對怎么設置css作用域這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！