在看CSS選擇器優(yōu)先級(jí)順序前，我們先來(lái)簡(jiǎn)單說(shuō)說(shuō)CSS基本選擇器有哪些？

1. 通用選擇器（如：*，即選擇所有元素）
2. 標(biāo)簽選擇器（如：body,div,p,ul,li）
3. id選擇器（如：id="name",id="name_txt"）
4. 類選擇器（如：id="name",id="name_txt"）
5. 后代選擇器（如：#head .nav ul li 從父集到子孫集的選擇器）
6. 子元素選擇器（如：div>p ,帶大于號(hào)>）
7. 偽類選擇器（如：就是鏈接樣式,a元素的偽類，4種不同的狀態(tài)：link、visited、active、hover。）
8. 偽元素選擇器

標(biāo)簽、id、類選擇器通常很好理解。標(biāo)簽選擇器的寫法就是直接寫一個(gè)標(biāo)簽如body{}；id選擇器的寫法是#id名稱{}，類選擇器的寫法是.class名稱{}。

下面我們來(lái)說(shuō)說(shuō)稍微復(fù)雜一點(diǎn)的選擇器

1. 后代選擇器

后代選擇器也稱為包含選擇器，用來(lái)選擇特定元素或元素組的后代，將對(duì)父元素的選擇放在前面，對(duì)子元素的選擇放在后面，中間加一個(gè)空格分開(kāi)。后代選擇器中的元素不僅僅只能有兩個(gè)，對(duì)于多層子線后代關(guān)系，可以有多個(gè)空格加以分開(kāi)。

如下例子定義了所有class屬性為father的元素下面的class屬性為child的顏色為紅色。

2. 子元素選擇器

請(qǐng)注意這個(gè)選擇器與后代選擇器的區(qū)別，子選擇器只是選擇元素的直接后代，即僅僅作用于第一個(gè)后代。后代選擇器通過(guò)空格來(lái)進(jìn)行選擇，而子選擇器是通過(guò)“>”進(jìn)行選擇。

3. 偽類選擇器

即鏈接樣式。a元素的偽類，存在4中不同的狀態(tài)：link、visited、active、hover。如

4. 偽元素選擇器

就像偽類一樣， 偽元素添加到選擇器，但不是描述特殊狀態(tài)，它們?cè)试S您為元素的某些部分設(shè)置樣式。 下例中的 ::first-line偽元素改變段落第一行的文字樣式。

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

注意：與偽元素比較，pseudo-classes 能夠用來(lái)改變基于狀態(tài)的元素樣式。

5. 組合選擇器

緊鄰兄弟選擇器
'+' 操作符選擇相鄰元素，即第二個(gè)節(jié)點(diǎn)緊鄰著第一個(gè)節(jié)點(diǎn)，并且擁有共同的父節(jié)點(diǎn)。
語(yǔ)法: A + B
例子: ul + li 會(huì)匹配任何 <ul>元素 后緊鄰的 <li>元素。

一般兄弟選擇器
'~' 操作符選擇兄弟元素，也就是說(shuō)，第二個(gè)節(jié)點(diǎn)在第一個(gè)節(jié)點(diǎn)后面的任意位置，并且這倆節(jié)點(diǎn)的父節(jié)點(diǎn)相同。
語(yǔ)法: A ~ B
例子: p ~ span 將會(huì)匹配同一父元素下，<p>元素后的所有 <span>元素。

子選擇器
'>’
語(yǔ)法: A > B
例子: ul > li 將會(huì)匹配直接嵌套在 <ul>元素 ( 或 HTML 無(wú)序列表元素） 代表多項(xiàng)的無(wú)序列表，即無(wú)數(shù)值排序項(xiàng)的集合，且它們?cè)诹斜碇械捻樞蚴菦](méi)有意義的。通常情況下，無(wú)序列表項(xiàng)的頭部可以是幾種形式，如一個(gè)點(diǎn)，一個(gè)圓形或方形。頭部的風(fēng)格并不是在頁(yè)面的HTML描述定義, 但在其相關(guān)的CSS 可以用 list-style-type 屬性。") 元素內(nèi)的所有 <li>元素 (或者 HTML 列表?xiàng)l目元素) 用于表示列表里的條目。它必須被包含在一個(gè)父元素里：一個(gè)有順序的列表(<ol>)，一個(gè)無(wú)順序的列表(<ul>)，或者一個(gè)菜單 (<menu>)。在菜單或者無(wú)順序的列表里，列表?xiàng)l目通常用點(diǎn)排列顯示。在有順序的列表里，列表?xiàng)l目通常是在左邊有按升序排列計(jì)數(shù)的顯示，例如數(shù)字或者字母。") 元素。

后代選擇器
' ' (空格) 操作符將選擇第一個(gè)元素的子代節(jié)點(diǎn)。
語(yǔ)法: A B
例子: div span 將匹配 <div>元素 內(nèi)所有的 <span>元素。

說(shuō)完了CSS選擇器，那么就要說(shuō)一說(shuō)選擇器它們的優(yōu)先級(jí)了

當(dāng)兩個(gè)規(guī)則都作用到了同一個(gè)html元素上時(shí)，如果定義的屬性有沖突，那么應(yīng)該用誰(shuí)的值的，CSS有一套優(yōu)先級(jí)的定義。

不同級(jí)別

1. 在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。
2. 作為style屬性寫在元素內(nèi)的樣式
3. id選擇器
4. 類選擇器
5. 標(biāo)簽選擇器
6. 通配符選擇器
7. 瀏覽器自定義或繼承

總結(jié)排序：!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性

同一級(jí)別

同一級(jí)別中后寫的會(huì)覆蓋先寫的樣式

上面的級(jí)別還是很容易看懂的，但是有時(shí)候有些規(guī)則是多個(gè)級(jí)別的組合

CSS優(yōu)先級(jí)：是由四個(gè)級(jí)別和各級(jí)別的出現(xiàn)次數(shù)決定的。
四個(gè)級(jí)別分別為：行內(nèi)選擇符、ID選擇符、類別選擇符、元素選擇符。

優(yōu)先級(jí)的算法：

每個(gè)規(guī)則對(duì)應(yīng)一個(gè)初始"四位數(shù)"：0、0、0、0
若是 行內(nèi)選擇符，則加1、0、0、0
若是 ID選擇符，則加0、1、0、0
若是 類選擇符/偽類選擇符，則分別加0、0、1、0
若是 元素選擇符，則分別加0、0、0、1

算法：將每條規(guī)則中，選擇符對(duì)應(yīng)的數(shù)相加后得到的”四位數(shù)“，從左到右進(jìn)行比較，大的優(yōu)先級(jí)越高。

需注意的：

1. !important的優(yōu)先級(jí)是最高的，但出現(xiàn)沖突時(shí)則需比較”四位數(shù)“;
2. 優(yōu)先級(jí)相同時(shí)，則采用就近原則，選擇最后出現(xiàn)的樣式;
3. 繼承得來(lái)的屬性，其優(yōu)先級(jí)最低;

!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性
*css選擇器使用強(qiáng)烈建議采用低權(quán)重原則，利于充分發(fā)揮css的繼承性，復(fù)用性，模塊化、組件化。

參考：
CSS選擇器優(yōu)先級(jí)總結(jié)
為什么CSS選擇器是從右往左解析