CSS標籤權值的計算

2021-09-26 04:40:57 字數 1156 閱讀 4330

*/by 司徒正美 all rights reserve*/

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

/* 萬用字元選擇器權重為0,在ie中,它無法區分元素節點與注釋節點 */

li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

/* 標籤選擇器為1 */

li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

/* 標籤選擇器與偽元素為1 */

ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

/*這裡存在後代選擇器的概念,但計算權重時像它這樣的關係選擇器會被進一步肢解,當成兩個標籤選擇器了。*/

ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */

/* 無視後代選擇器與相鄰選擇器,只看它裡面的選擇器的成分 */

h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */

/* 這個相鄰選擇器由標籤選擇器與屬性選擇器組成,屬性選擇器為10 */

ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */

/*無視後代選擇器,3個標籤與1個類選擇器,類(classname)在dom中的位置比較顯赫,

擁有專門的getelementbyclassname,等級為c,合計得分13 */

li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

/*兩個類選擇器與乙個標籤選擇器,合計得分21 */

#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

/*getelementbyid,在頁面上獲得元素最快的方式,權重為b,得分100 */

style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

/*行內樣式,得分1000,會覆蓋內部樣式或外部樣式的設定*/

標籤的權值

1 標籤的權值為1,類選擇符的權值為10,id選擇符的權值最高為100。p 權值為1 p span 權值為1 1 2 p span.warning 權值為1 1 10 12 footer note p 權值為100 10 1 111 注意 還有乙個權值比較特殊 繼承也有權值但很低,有的文獻提出它只有...

關於css權值的問題

最近迷上html5,看了一些相關學習資料,現在把css中常見易出錯易混淆的知識總結一下 首先說一下關於css樣式繼承,重疊和特殊性 有的時候我們會為同乙個元素設定不同的css樣式 那麼元素會啟用哪乙個css樣式呢?瀏覽器是根據權值來判斷使用哪種樣式的,權值越高,就使用哪種樣式。下面是權值的規則 標籤...

權值計算 特殊性

有的時候我們為同乙個元素設定了不同的css樣式 那麼元素會啟用哪乙個css樣式呢?下面我們一起來看一下 p first class first 三年級時,我還是乙個 膽小如鼠span 的小女孩。p p和.first都匹配到了p這個標籤上,那麼會顯示哪種顏色呢?green是正確的顏色,那麼為什麼呢?是...