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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

小結(jié)

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