css沖突怎么解決？論樣式優(yōu)先級(jí)的權(quán)重劃分！

很多小伙伴們會(huì)遇到這樣的情況：有一個(gè) HTML 元素，它的樣式在 CSS 中出現(xiàn)過一次定義，在 HTML 的 ?<style?> 又出現(xiàn)過一次定義，最后在行間樣式中又出現(xiàn)過一次定義，那么這個(gè)元素最終應(yīng)該應(yīng)用哪個(gè)樣式呢？這就是 CSS 沖突，同一個(gè)元素可能會(huì)有多個(gè) CSS 定義，這個(gè)時(shí)候就會(huì)出現(xiàn) CSS 沖突。那么這樣的 CSS 沖突怎么解決呢？接下來就由小編來給大家介紹：什么是 CSS 樣式優(yōu)先級(jí)？它們的權(quán)重又是怎么樣的？

首先，同一個(gè)標(biāo)簽上可能會(huì)有多個(gè)不同的 CSS 屬性，這些 CSS 屬性作用在同一個(gè)標(biāo)簽上，就有了優(yōu)先級(jí)的差異，一般情況下簡單的選擇器的權(quán)重大概可以按照如下的順序（從高到低）進(jìn)行比較：

最高級(jí)別的權(quán)重：?！important?，屬于絕對(duì)優(yōu)先；

第二級(jí)別的權(quán)重：行間樣式（內(nèi)聯(lián)樣式）；

第三級(jí)別的權(quán)重：id 選擇器；

第四級(jí)別的權(quán)重：class 選擇器，偽類選擇器，屬性選擇器；

第五級(jí)別的權(quán)重：標(biāo)簽選擇器，偽元素選擇器；

第六級(jí)別的權(quán)重：通配符選擇器（*），子選擇器（>），相鄰?fù)x擇器（+）等選擇器；

最低級(jí)別的權(quán)重：瀏覽器默認(rèn)樣式；

復(fù)雜的選擇器權(quán)值計(jì)算可以參考小編的這篇文章：CSS高階知識(shí)點(diǎn)-CSS權(quán)值計(jì)算方法

有上述的規(guī)律也可以知道：瀏覽器默認(rèn)樣式最低，是因?yàn)橥ㄅ浞x擇器都能比他更優(yōu)先；因?yàn)橥ㄅ浞x擇器樣式權(quán)重極低，所以一般在 CSS 中用來初始化瀏覽器樣式。

以上是權(quán)重不同的情況，那如果權(quán)重相同的情況怎么比較呢？CSS 可以理解為是順序執(zhí)行的，權(quán)重相同的情況下位于后面的代碼會(huì)覆蓋掉前面的代碼。

根據(jù)以上規(guī)律，可以得到如何避免 CSS 沖突的辦法：如果可以提升權(quán)重，就提升權(quán)重；如果不能提升權(quán)重，就把權(quán)重提到相等，然后將要渲染的樣式放到較后方（不建議使用這種方法，因?yàn)橛行g覽器可能不支持這種做法）。

另外，很多讀者會(huì)問，不是還有最高級(jí)權(quán)重嘛？沒錯(cuò)，可以使用最高級(jí)權(quán)重來進(jìn)行樣式的鎖定，但這樣會(huì)讓代碼不好定位樣式錯(cuò)誤，所以不到萬不得已，千萬不要使用。此外，行間樣式也應(yīng)該盡量少用，因?yàn)闃?biāo)準(zhǔn)的 HTML 與 CSS 的分工，是 HTML 負(fù)責(zé)文本結(jié)構(gòu)，CSS 負(fù)責(zé)樣式處理，如果使用行間樣式，就相當(dāng)于讓 HTML 也負(fù)責(zé)了樣式，這樣子對(duì)樣式的調(diào)試也不好。

小結(jié)

以上就是 CSS 沖突怎么解決的方法。更多前端開發(fā)知識(shí)學(xué)習(xí)，盡在前端微課。