CSS 特异性看这篇就行了
CSS 特異性
背景：在我每次畫界面的時候，總會出現(xiàn)樣式?jīng)_突、樣式污染、一級很多樣式改不掉的問題。所以總結(jié)一文來徹底搞懂css樣式的特異性，方便你我他。
什么是css特異性？
如果有多個屬性或者選擇器，同時指向同一元素的CSS沖突 ，那么優(yōu)先使用什么樣式規(guī)則。那么便有了特異性的概念。
特異性（specificity）視為得分/等級，能夠確定最終將哪些樣式聲明應(yīng)用于元素。
簡單來說：CSS特異性就是CSS樣式選擇器的權(quán)重計算。從而讓哪些樣式應(yīng)用到元素上。
特異性層次
每一種選擇器都有自己的權(quán)重，依次是
行內(nèi)樣式 > ID選擇器 > 類、屬性、偽類 > 元素、偽元素選擇器
我們來個例子說明一下：
代碼：
效果:
可以說明上面的選擇器權(quán)重是不同的。
權(quán)重計算特異質(zhì)
這么多選擇器，那是不是我寫一個行內(nèi)樣式其他樣式就全部沒用了呢？NONONO，這個時候我們就要來計算權(quán)重了。
我們以一個 0 0 0 0 四位數(shù)為樣式的權(quán)重總和
從最低的元素、偽元素選擇器 在個位+1 就是 0 0 0 1
類、屬性、偽類 在十位數(shù)+1 就是 0 0 1 0
ID選擇器 在百位數(shù)+1 就是 0 1 0 0
行內(nèi)樣式 在千位數(shù)+1 就是 1 0 0 0
比較每一個權(quán)重值的總和，大的樣式優(yōu)先。
例子：
<body><div id="main"><div class="content"><p class="name">浪漫主義碼農(nóng)</p><p class="hobby">愛好打籃球</p><p class="eat">是個吃貨</p></p></div></div> </body> <style>/* 權(quán)重 0 0 0 1 */p{color: red;}/* 權(quán)重 0 0 1 0 */.name{color: blue;}/* 權(quán)重 0 0 2 1 */.content p:nth-child(1){color: chartreuse;} </style>效果：
計算就是這樣計算的。但是如果有相同權(quán)重的，就按照定義的順序優(yōu)先的樣式
補充
除了上述的選擇器外，通用選擇器* 權(quán)重為0 0 0 0 為最低
!important 表示 非必要不使用，是比行內(nèi)樣式更為重要，是權(quán)重最高的，無視其他。
例子：當我給最低的權(quán)重加一個!important
<body><div id="main"><div class="content"><p class="name" style="color: chartreuse;">浪漫主義碼農(nóng)</p><p class="hobby" style="color: chartreuse;">愛好打籃球</p><p class="eat" style="color: chartreuse;">是個吃貨</p></p></div></div> </body> <style>/* 權(quán)重 0 0 0 2 */p:nth-child(1){color: red !important;}/* 權(quán)重 0 0 1 0 */.name{color: blue;} </style>效果：
寫在最后
如果有誤，歡迎大佬們評論指出。
💌 慢品人間煙火色，閑觀萬事歲月長 💌
一個心懷浪漫宇宙，也珍惜人間日常的碼農(nóng)
總結(jié)
以上是生活随笔為你收集整理的CSS 特异性看这篇就行了的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python时钟代码——利用python
- 下一篇： CSS 特异性