• <button id="eiyoe"><acronym id="eiyoe"></acronym></button>
    <em id="eiyoe"></em>

  • <rp id="eiyoe"><acronym id="eiyoe"><input id="eiyoe"></input></acronym></rp>
      查看: 1268|回復: 0
      上一主題 下一主題

      CSS作用域(樣式分割)的使用匯總

      80572

      主題

      0

      好友

      積分

      離線 發信

      跳轉到指定樓層
      樓主
      發表于 2021-11-21 02:07 | 只看該作者 | 倒序瀏覽

      一、CSS作用域(樣式分割)的使用

      在vue中,讓css樣式只在當前組件中生效:scoped 屬性是 HTML5 中的新屬性,是一個布爾屬性,如果使用該屬性,則樣式僅僅應用到 style 元素的父元素及其子元素。

      在這里插入圖片描述

      二、scoped的實現原理

      vue中的scoped屬性的效果主要通過PostCSS轉譯實現,如下是轉譯前的vue代碼:

        <style scoped>
          .test {
            color: blue;
          }
        </style>
        
        <template>
          <div class="test">Hi world</div>
        </template>
      

      轉譯后:

        <style>
          .test[data-v-5559930f] {
            color: blue;
          }
        </style>
        
        <template>
          <div class="test" data-v-5559930f>Hi world</div>
        </template>
      

      PostCSS給一個組件中的所有DOM添加一個獨一無二的動態屬性,然后,給CSS選擇器額外添加一個對應的屬性選擇器來選擇該組件中的DOM,這種做法使得樣式只作用于含有該屬性的DOM<組件內部DOM>。

      三、scoped穿透方法

      在很多項目中,當引用第三方組件,需要再組件中局部修改第三方組件的樣式,而又不想去除scoped屬性造成組件之間的樣式污染。這時就需要采用一些特殊的方式來進行穿透scoped。

      方法一: 使用>>>可以穿透scoped屬性,修改其他第三方組件樣式。

      在這里插入圖片描述

      方法二: 使用兩個style標簽,一個帶scoped屬性,一個不帶scoped屬性,用來修改第三方組件的樣式。

      在這里插入圖片描述

      方法三: 使用sass或less的樣式穿透 /deep/

      在這里插入圖片描述

      方法四: 通過在最外層加 id或者 class的形式進行區分。

      到此這篇關于CSS作用域(樣式分割)的文章就介紹到這了,更多相關CSS作用域內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

      來源:http://www.jb51.net/css/796172.html