css權重與常見佈局（1）

CSS的選擇器類型與權重值

1. 通配符選擇器 權重值爲 0
2. 元素選擇器，和僞元素(例如::before) 權重值爲 1
3. 類選擇器(class)，屬性選擇器，僞類(:hover) 權重值爲 10
4. ID選擇器 權重值爲 100
5. 行內樣式 權重值爲 1000
6. ！important 權重值比前5個都大，能夠說無窮大

tips:

• ！important的權重最大，可是它能夠被權重更大的！important所覆蓋
• 行內樣式 總會覆蓋外部樣式表的任何樣式(除了!important)
• 幾種權重值不一樣的選擇器做用在同一個元素上，以權重值大的css樣式規則生效
• 幾種權重值相同的選擇器做用在同一個元素上，之後面出現的選擇器的css樣式規則生效
• 不管使用多少個權重低的選擇器夠比不過一個權重值高的選擇

若是有!important那麼相加的那些不管多權重高就無論用，若是有max-height/max-width那麼!important無論用，若是同時有min-height/min-width和 max-height/max-width，那麼max-height/max-width的無論用

口訣：從0開始，一個行內樣式+1000，一個id+100，一個屬性選擇器/class或者僞類+10，一個元素名，或者僞元素+1

min-height/min-width > max-height/max-width > !important > 行內樣式 > ID選擇器 > 類選擇器、屬性選擇器、僞元素和僞類選擇器 > 元素選擇器 > 通用選擇器

權重的計算方法

div p h3 ---> 0,0,0,3 因此此時h3標籤的權重值爲3， 由於div,p,h3這些都是標籤選擇器（權重值爲1）

<div>
    <p>
        <h3>xxxx</h3>
    </P>
</div>

#par .sub h3 ---> 0,1,1,1 此時的h3標籤的權重值爲111=100+10+1 (依次類推)

<div id="par">
    <p class="sub"> 
        <h3>xxxx</h3>
    </P>
</div>

要注意的一點就是如前面說到的那樣，數位沒有進位： 0,0,0,5 + 0,0,0,5 = 0,0,0,10而不是0,0,1,0，因此不會存在10個div能遇上一個類選擇器的狀況。

實戰例題(某廠前端工程師筆試題)

基於如下的HTML結構和CSS樣式，文本Dijkstra的顏色是？

<ul class="authors" id="favorite">
    <li><span>Martin Fowler</span></li>
    <li id="related><span class="highlight">Dijkstra</span></li>
</ul> 

ul #related span {
    color:red;
}
#favorite .highlight{
     color:orange;
}
.highlight{
    color:black;
}

計算權重：
（1）ul #related span ---> 0,0,0,1 + 0,1,0,0 + 0,0,0,1 =0,1,0,2 ---> 102 red
(2) #favorite .highlight ---> 0,1,0,0 + 0,0,1,0 = 0,1,1,0 ---> 110 orange (權重最大)
(3) .highlight ---> 0,0,1,0 = 10 black

由於110 > 102 > 10 因此文本Dijkstra顯示的 Orange這種顏色