CSS樣式沖突怎么解決

這篇文章主要介紹“CSS樣式沖突怎么解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS樣式沖突怎么解決”文章能幫助大家解決問題。

樣式沖突解決方案

Scoped CSS與CSS Module是兩大解決CSS中不存在模塊化缺陷的有效手段，其中CSS Module通過將class名稱做編碼轉換的方式來保證唯一性，從而避免樣式沖突，比如

 <h2 className={style.title}>

     Hello World

 </h2>

被轉換為

 <h2 class="_3zyde4l1yATCOkgn-DBWEL">

     Hello World

 </h2>

而相應的

 .title {

   color: red;

 }

被轉換為

 ._3zyde4l1yATCOkgn-DBWEL {

   color: red;

 }

由于轉換過后發生同名的可能性實在是太小了，這樣就保證了在開發階段可以放心的使用各種樣式名稱，即便發生同名也不會造成沖突。

而Scoped CSS使用的是另一種解決方案 &mdash;&mdash; 在HTML標簽上做文章，比如

 <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>

這樣，example的樣式被限定在具有data-v-f3f3eg9屬性的HTML標簽上，也間接保證了唯一性，避免沖突。

本來到此好好的，不過官方文檔接下來的一段話反而讓我迷惑了

使用 scoped 后，父組件的樣式將不會滲透到子組件中。不過一個子組件的根節點會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。這樣設計是為了讓父組件可以從布局的角度出發，調整其子組件根元素的樣式。

看來還是得要做實驗

準備

準備三個組件

Level1.vue

Level2.vue

Level3.vue

其中Level1.vue包含了Level2.vue，Level2.vue包含了Level3.vue

接著加上一些方便于辨析的樣式

關于“CSS樣式沖突怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。