標籤：元素 構建 first color gre 衝突 yellow 數學 over
在前端開發的時候，css構建樣式規則，這個時候我們會遇到一個問題：當我們對同一個元素做多個樣式規則，其中發生了衝突的時候，css是如何選擇最終呈現的樣式
如下：
div{ color:red; } div.main{ color:blue; } div#main2{ color:green } <body> <div class="main" id="main2">
ssss
</div> </body>
最終這個“sss”會是什麼顏色呢？這就卻決於css選取器的特殊性：
特殊性的描述可分為四個部分：如：0，0，0，0
什麼意思呢？這四個數字，是有優先順序的，這就類似於nvidia的顯卡
我們先做如下定義：
四個數字，位元壓縮，從左至右優先順序依次降低，每一位元字越大，特殊性越大，特殊性越大，有衝突的選取器規則將被使用到最終效果
用於比較時候：
從左往右比較兩個選取器的特殊性，比較按同位比，如果當前位上，選取器1大於選取器2，選取器1特殊性大；如果當前位上，選取器1小於選取器2，選取器2特殊性大；如果相等，跳過當前位，比較下一位，方法與當前位同理
舉例：（由大到小的特殊性）
1，0，0，0>
0，2，0，0>
0，1，2，0>
0，0，3，0>
0，0，1，0>
0，0，0，1>0，0，0，0
請先理解上面的例子，後面我們使用這種方式描述特殊性
我們看到特殊性描述一共有4位元，就像數學裡的千，百，十，個一樣
第一位：內聯樣式
第二位：ID選取器（#main）
第三位：類別選取器，屬性選取器或偽類（.main 或 input[name=main] 或 a:hover li:first-child）
第四位：元素或虛擬元素(p,div,input等常用的元素，虛擬元素比如p:first-letter p:first-line)
萬用字元*(0,0,0,0)
空格什麼都不算（0,0,0,0都談不上，最小特殊性）對選取器特殊性沒有任何影響
舉例：
假設以下的選取器指向同一個元素，並且出現了矛盾
1 h1{color:red;} /*0001*/2 p em{color:silver;} /*0002*/3 .grape{color:purple;} /*0010*/4 *.bright{color:blue;} /*0010*/5 p.bright{color:green;} /*0022*/6 #id{color:black;} /*0100*/7 div#id{color:yellow;} /*0111*/
很顯然最後這個這個元素，是黃色（yellow），因為他的特殊性最大！
css優先順序之特殊性
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
