CSS樣式?jīng)_突怎么解決

這篇文章主要介紹“CSS樣式?jīng)_突怎么解決”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“CSS樣式?jīng)_突怎么解決”文章能幫助大家解決問題。

樣式?jīng)_突解決方案

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

 <h2 className={style.title}>

     Hello World

 </h2>

被轉(zhuǎn)換為

 <h2 class="_3zyde4l1yATCOkgn-DBWEL">

     Hello World

 </h2>

而相應(yīng)的

 .title {

   color: red;

 }

被轉(zhuǎn)換為

 ._3zyde4l1yATCOkgn-DBWEL {

   color: red;

 }

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

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

 <style scoped>

 .example {

   color: red;

 }

 </style>

 <template>

   <div class="example">hi</div>

 </template>

被轉(zhuǎn)換為

 <style>

 .example[data-v-f3f3eg9] {

   color: red;

 }

 </style>

 <template>

   <div class="example" data-v-f3f3eg9>hi</div>

 </template>

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

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

使用 scoped 后，父組件的樣式將不會(huì)滲透到子組件中。不過一個(gè)子組件的根節(jié)點(diǎn)會(huì)同時(shí)受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。這樣設(shè)計(jì)是為了讓父組件可以從布局的角度出發(fā)，調(diào)整其子組件根元素的樣式。

看來還是得要做實(shí)驗(yàn)

準(zhǔn)備

準(zhǔn)備三個(gè)組件

Level1.vue

Level2.vue

Level3.vue

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

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

關(guān)于“CSS樣式?jīng)_突怎么解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。