20180224-css選擇器的權重

css選擇器的權重

1第一種狀況：
樣式表中只有單同樣式：
即 內聯>id>class>元素
#id{} .class{} p{}

2第二種狀況：
組合選擇器
從左往右逐個比較，按a,b,c,d 進行比較 越大權重越高。
權限值生成方法
按權重由高到低書寫,不按選擇器的順序寫
eg:

/*bbc  */
#dii .dd #ip{
  color: palevioletred;
}

/*bcc  */
#dii .dd .cp{
  color: paleturquoise
}

/*bbb  */
#dii>#idd>#ip{
  color: yellowgreen;
}

這個裏面權重順序 bbb>bbc>bcc
3 單個和組合混淆
eg:

/*bcc  */
#dii .dd .cp{
  color: paleturquoise
}

/*bbc  */
#dii .dd #ip{
  color: palevioletred;
}

/*bbb  */
#dii>#idd>#ip{
  color: yellowgreen;
} 
-------------------------------------
單個
/*b  */
#ip{
  color: cyan;
}

權重順序  bbb>bbc>bcc>b

總結：

權重值從左往右逐個比較，如第一個位置與另外一組的第一個比較，有大小權重關係就不在比較後面的，如相等
繼續比較後面的，若是是比較的組合一個有值另外一個沒值，有值權重更高。