原來css 套用是有優先權高低的
這邊說得不完全是 inline & link 的權重,而是 如果處於同樣的等級(ex: 同樣處於引入的css檔案),套用上去的還是有差。
我一直以為是後面的蓋掉前面的,但其實不完全如此,因為我最近碰到好幾次 @@,都想不通是什麼道理(那時候搜尋也沒看到….),看了這篇文章: Don’t use !important 才知道為什麼 =.= 。
簡單的說就是如果有一個div 長這樣
<div id=”aa”></div>
你先這樣寫
#aa{ color:red}
然後之後再這樣寫
div{color: blue}
就算 div 的設定 之後才被讀入,也還是不會蓋過去喔!!! 為什麼好多css的書都沒寫,還是我眼殘呢? 我真的不記得有在書上看到阿!!!!
ref: 6.4.3 Calculating a selector’s specificity
p.s 計算方式
* {} /* 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 */

最新留言