CSS選擇器及優先級

選擇器分類

id選擇器

<div id="wrap"></div>
#wrap{ background: black; }

類選擇器

<div class="wrap"></div>
.wrap{ background: black; }

標籤選擇器

div{
    margin:0;
}

屬性選擇器

<input type="text">
[type=text] {
    background: black;
}

僞類選擇器

1. a元素的僞類：link、visited、active、hover。
2. 其餘
   (1) li:first-child{} (修飾第一個li)
   (2) li:last-child{} (修飾最後一個li)
   (3) li:nth-child{} (修飾第()個li)
   (4) li:not(){} (不修飾第()個li,括號裏面能夠填以上的選擇器)

<ul>
    <li></li>
    <li></li>
    <li><a href=""></a></li>
</ul>
li:first-child {
    border:1px solid black;
}
li:last-child {
    border:1px solid red;
}
li:nth-child(2){
    border:1px solid yellow;
}

僞元素選擇器

p::first-line {
  color: blue;
  text-transform: uppercase;
}

羣選擇器
以，分隔(逗號分隔開須要修飾的模塊名)

<div class="qun">
    <p><span></span></p>
    <p></p>
</div>

.qun,span {
    margin:0;
}

全局選擇器
以*開頭(星號標在大括號前，修飾了包含body全部的標籤)

* {
    margin:0;
}

緊鄰兄弟選擇器（相鄰選擇器）
以+隔開相鄰關係的元素，即第二個節點緊鄰着第一個節點，而且擁有共同的父節點。

<div class="qun">
    <p class="first">
        <span>第一</span>
    </p>
    <p>第二</p> /*修飾*/
    <p>第三</p>
</div>

.first+p{
    margin:0;
}

通常兄弟選擇器
以~隔開兄弟關係的元素，第二個節點在第一個節點後面的任意位置，而且這倆節點的父節點相同。

<div class="qun">
    <p class="first">
        <span>第一</span>
    </p>
    <p>第二</p> /*修飾*/
    <p>第三</p> /*修飾*/
</div>

.first~p{
    margin:0;
}

子元素選擇器
以>隔開父子級元素，子選擇器只是選擇元素的直接後代，即僅僅做用於第一個後代。

<div class="qun">
    <p class="first">
        <span>第一</span>
    </p>
    <p>第二</p>
    <p>第三</p>
    <span>第四</span> /*修飾*/
</div>

.qun > span {
    color:black;
}

後代選擇器
以空格隔開包含關係的元素，選擇元素的全部後代

<div class="qun">
    <p class="first">
        <span>第一</span> /*修飾*/
    </p>
    <p>第二</p>
    <p>第三</p>
    <span>第四</span> /*修飾*/
</div>

.qun span {
    color:black;
}

優先級的計算規則

!important > 內聯 > ID選擇器 > 類選擇器 > 標籤選擇器。

優先級是由A、B、C、D的值來決定的，其中它們的值計算規則以下：

1. 若是存在內聯樣式，那麼A = 1, 不然A = 0;
2. B的值等於ID選擇器出現的次數;
3. C的值等於類選擇器和屬性選擇器和僞類出現的總次數;
4. D的值等於標籤選擇器和僞元素出現的總次數 。

例子：

#nav-global > ul > li > a.nav-link

套用上面的算法，依次求出A B C D的值：

1. 由於沒有內聯樣式 ，因此A = 0;
2. ID選擇器總共出現了1次，B = 1;
3. 類選擇器出現了1次， 屬性選擇器出現了0次，僞類選擇器出現0次，因此C = (1 + 0 + 0) = 1；
4. 標籤選擇器出現了3次， 僞元素出現了0次，因此D = (3 + 0) = 3;

上面算出的A、B、C、D能夠簡記做：(0, 1, 1, 3)。
比較規則是: 從左往右依次進行比較 ，較大者勝出，若是相等，則繼續往右移動一位進行比較 。若是4位所有相等，則後面的會覆蓋前面的

參考文章：http://www.javashuo.com/article/p-hcnikgda-ma.html