翻譯自w3c 中的一段 是關於css選擇器優先順序的
計算乙個選擇器的特異性
選擇器的特異性計算如下：
1.計算選擇器中id選擇器的數量（=a）
2.計算選擇器中class選擇器，屬性選擇器和偽類選擇器的數量（=b）
3.計算型別選擇器和偽元素選擇器的數量（=c）
4.忽視通用選擇器
連線三個數字a-b-c就是特異性
例子：* /* a=0 b=0 c=0 -> specificity = 0 */
li /* a=0 b=0 c=1 -> specificity = 1 */
ul li /* a=0 b=0 c=2 -> specificity = 2 */
ul ol+li /* a=0 b=0 c=3 -> specificity = 3 */
h1 + *[rel=up] /* a=0 b=1 c=1 -> specificity = 11 */
ul ol li.red /* a=0 b=1 c=3 -> specificity = 13 */
li.red.level /* a=0 b=2 c=1 -> specificity = 21 */
#x34y /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(foo) /* a=1 b=0 c=1 -> specificity = 101 */
特異性大的優先級別高
CSS選擇器優先順序（特異性）
1 行內樣式 important 2 id選擇器 id3 class 屬性 偽類選擇器 title,input type text hover4 型別和偽元素選擇器 div,before 0,0,0,0 行內樣式，id選擇器，class 屬性 偽類選擇器 型別 偽元素 權重相同，定義靠後優先 con...
什麼是CSS特異性及其工作方式？
使用css時，樣式衝突可能會給您帶來麻煩，尤其是當您不知道衝突的 時。本教程將使您對css的特性有深入的了解，這將有助於填補任何知識空白，從而最終不會使您擺脫沮喪。注意 也許您是經驗豐富css專業人士？自css誕生以來，這是開發人員一直喜歡談論的話題，但是重新整理您的記憶總是很有趣的！本教程是我們的...
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...