【CSS】选择器优先级
生活随笔
收集整理的這篇文章主要介紹了
【CSS】选择器优先级
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
CSS的選擇器優(yōu)先級的權(quán)重
在 Selectors Level 3 規(guī)范中，一個選擇器的優(yōu)先級（權(quán)重）由依次串聯(lián)的a、b、c三個標(biāo)記來計算
a: ID選擇器 如#header
b: class選擇器如.header 屬性選擇器如[title] 偽類如:link
c: 標(biāo)簽選擇器如h1 偽元素選擇器如::after
注意：偽類:not不參與優(yōu)先級的計算
一些例子
只要一個選擇器的 a>0，b=0，即使另外一個選擇的a=0, b=161，那么前者的權(quán)重依然更大。
a:link{color: red; /* 優(yōu)先級:a=0,b=1,c=1 */ }.test{color: yellow; /* 優(yōu)先級:a=0,b=1,c=0 */ }他們的權(quán)重（優(yōu)先級）b是相等的，但是c標(biāo)記中，前者大于后者，所以最終「a:link」生效顯示為紅色。
:not() 不參與優(yōu)先級的計算 但()里面的選擇器要計算在內(nèi)
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>CSS Selectors Level</title><style type="text/css">.inner:not(.outer) p {color: red;}.outer .inner p {color: orange;}</style> </head><body><div class="outer"><p>outer</p><div class="inner"><p>inner</p></div></div> </body></html>這個inner會顯示orange 因為兩個優(yōu)先級相同，下面的會覆蓋上面的
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>CSS Selectors Level</title><style type="text/css">.inner:not(#outer) p {color: red;}.outer .inner p {color: orange;}</style> </head><body><div class="outer"><p>outer</p><div class="inner"><p>inner</p></div></div> </body></html>而這個例子會顯示藍(lán)色，上面的:not()內(nèi)的id選擇器也要計算在內(nèi)
參考鏈接：
1.知乎的討論：http://www.zhihu.com/question/21777264
2.某博客：http://www.clanfei.com/2013/11/1731.html
轉(zhuǎn)載于:https://www.cnblogs.com/lijie33402/p/4595418.html
總結(jié)
以上是生活随笔為你收集整理的【CSS】选择器优先级的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C语言及程序设计进阶例程-32 位运算及
- 下一篇： 3.3 循环链表