其實平時用得多的選擇器無非也就是那么幾個，時間久了，許多不常用的選擇器就慢慢忘記了。為了不讓自己忘記這些選擇器，今天就來對CSS的選擇器做一個大致的整理和總結吧~
選擇器分為基本選擇器、組合選擇器、偽類選擇器和偽元素。其中，基本選擇器包括元素選擇器、類選擇器、ID選擇器、通配選擇器、屬性選擇器；組合選擇器包括相鄰兄弟選擇器、通用兄弟選擇器、子選擇器、后代選擇器；偽類選擇器包括目標偽類選擇器、結構偽類選擇器、動態偽類選擇器、狀態偽類選擇器、語言偽類選擇器、否定偽類選擇器等 ；偽元素包括::before、::after、::first-letter、::first-line等。
下面，我將分別介紹這些選擇器，并對優先級做一個大致總結。
文章結構：
-
基本選擇器
- 通配選擇器
- 屬性選擇器
-
組合選擇器
- 相鄰兄弟選擇器
- 通用兄弟選擇器
-
偽類選擇器
- 目標偽類選擇器
- 結構偽類選擇器
- 動態偽類選擇器
- 狀態偽類選擇器
- 語言偽類選擇器
- 否定偽類選擇器
-
偽元素
- ::before、::after
- ::first-letter
- ::first-line
- 優先級
一、基本選擇器
基本選擇器包括元素選擇器、類選擇器、ID選擇器、通配選擇器、屬性選擇器。其中，元素選擇器、類選擇器、ID選擇器是我們最常用的幾個選擇器，很簡單，也沒有需要注意的地方，我就不再寫啦 ，重點來說說通配選擇器和屬性選擇器。
1、通配選擇器
一個 *** 就是一個通配選擇器，可以匹配任意類型的HTML元素。
在CSS3中，* 可以和命名空間組合使用：
- *：會匹配所有元素；
- ns *：會匹配ns命名空間下的所有元素；
- *** xx：會匹配所有命名空間下的xx元素，即xx{...} 。
不推薦使用通配選擇器，因為它是性能最低的一個CSS選擇器。
2、屬性選擇器
屬性選擇器通過已經存在的屬性名或屬性值匹配元素。
[attr]
表示帶有attr屬性的元素；[attr=value]
表示帶有attr屬性、并且屬性值為"value"的元素；[attr~=value]
表示帶有attr屬性的元素，并且該屬性是一個以空格作為分隔的值列表，其中至少有一個值為"value"；[attr|=value]
表示帶有attr屬性、并且屬性值為"value"或以"value-"為前綴的元素；典型的應用場景是用來匹配語言簡寫代碼（如zh-CN，zh-TW可以用zh作為value）；
注意點：attr屬性中要匹配的"value"或"value-"前綴必須放在屬性值的開頭，否則不生效。[attr^=value]
表示帶有attr屬性、并且屬性值以"value"開頭的元素；
注意點：
1、attr屬性中要匹配的"value"必須放在屬性值的開頭，否則不生效；
2、與 [attr|=value] 不同的地方在于，[attr|=value] 匹配的是"value-"前綴，而[attr^=value]只需以"value"開頭即可，因此條件相對寬松。[attr$=value]
表示帶有attr屬性、并且屬性值以"value"結尾的元素；
注意點：可以有多個屬性值，只匹配最后一個的結尾。[attr=value]*
表示帶有attr屬性、并且屬性值為"value"的元素；[attr operator value i]
在帶有屬性值的屬性選擇器表達式的右括號（]）前添加用空格間隔開的字母i（或者大寫I）可以忽略屬性值的大小寫（ASCII字符范圍內的字母）。如[attr*=value i]，只需在上面的屬性選擇器表達式最后寫"i"即可忽略大小寫的檢查。
二、組合選擇器
組合選擇器包括相鄰兄弟選擇器、通用兄弟選擇器、子選擇器、后代選擇器。其中，子選擇器和后代選擇器只需要注意“兒子”和“后代”的關系，很簡單，我這里就略過啦，重點來說相鄰兄弟選擇器和通用兄弟選擇器。
1、相鄰兄弟選擇器
相鄰兄弟選擇器只會匹配緊跟其前方元素的同胞元素。
語法：前方元素+目標元素{ 樣式聲明 }
注意點：樣式聲明只針對目標元素，前方元素樣式不變。
2、通用兄弟選擇器
在使用 ~ 連接兩個元素時，它會匹配第二個元素，條件是它必須跟（不一定是緊跟）在第一個元素之后，且他們都有一個共同的父元素。
語法：元素~元素{ 樣式聲明 }
注意點：
1、樣式聲明只針對后方元素，前方元素樣式不變；
2、這兩個元素必須要有共同的父元素。
三、偽類選擇器
在MDN文檔中，有三十多個偽類選擇器，可以大致分類為目標偽類選擇器、結構偽類選擇器、動態偽類選擇器、狀態偽類選擇器、語言偽類選擇器、否定偽類選擇器這六種。
1、目標偽類選擇器
1）、:target
:target用來指定那些包含片段標識符的URI的目標元素樣式。
語法：元素:target{ 樣式聲明 }，選擇一個特定目標元素；
:target{ 樣式聲明 }，定位所有目標元素。
舉例：
// html
<body>
<a href="#d1">指向d1</a>
<a href="#d2">指向d2</a>
<div id='d1'></div>
<div id='d2'></div>
</body>
// css
a{
text-decoration:none;
}
div{
width:300px;
height:200px;
border:1px solid ;
}
/* 對所有目標元素都生效 */
:target{
border:none;
}
/* 僅對于特定目標元素生效 */
#d1:target{
background:#ddd;
}
#d2:target{
background:pink;
}
結果：
通過上述例子我們可以看出，:target對任何目標元素都生效，所以點擊“指向d1”時id為d1的div的border消失，點擊“指向d2”時id為d2的div的border消失；而#d1:target、#21:target僅針對特定的目標元素。
2、結構偽類選擇器
1）、:root
:root匹配文檔樹的根元素。應用到HTML，:root即表示為<html>元素，除了優先級更高外，相當于html標簽選擇器。
語法：:root{ 樣式聲明 }。聲明全局CSS變量時，:root很有用。
2）、:first/last-child
:first/last-child匹配父元素的所有子元素中第一個/最后一個元素。
語法：條件元素:first/last-child{ 樣式聲明 }。
注意點：
1、語法 “ 條件元素:first/last-child{ 樣式聲明 } ” 實際需要滿足兩個條件才能進行 “ {} ” 內的樣式渲染：第一，要找到所有的條件元素；第二，所有條件元素的第一個條件元素必須是父元素的第一個子元素，所有條件元素的最后一個條件元素必須是父元素的最后一個子元素。
舉例：
// html
<body>
<div>
<p>這是第1段</p>
<p class='spec'>這是第2段</p>
<p>這是第3段</p>
<p>這是第4段</p>
<p class='spec'>這是第5段</p>
<p class='spec'>這是第6段</p>
</div>
</body>
// css
p.spec:first-child{
background:#ddd;
}
p.spec:last-child{
background:pink;
}
結果：
我們看到，第一段沒有生效，最后一段生效了。因為第一個p.spec不是父元素的第一個子元素，所以沒有生效；而最后一個p.spec是父元素的最后一個子元素，所以生效了。
2、:first/last-child在使用時必須有一個父包含塊，否則:last-child可能不生效。舉例：
// html
<body>
<p>這是第1段</p>
<p>這是第2段</p>
<p>這是第3段</p>
<p>這是第4段</p>
<p>這是第5段</p>
<p>這是第6段</p>
<p>這是第7段</p>
</body>
// css
p:first-child{
background:#ddd;
}
p:last-child{
background:pink;
}
我們看到，第一個p生效，最后一個p未生效。現在我們給這些p元素包裹一個父元素：
// html
<body>
<div>
<p>這是第1段</p>
<p>這是第2段</p>
<p>這是第3段</p>
<p>這是第4段</p>
<p>這是第5段</p>
<p>這是第6段</p>
<p>這是第7段</p>
</div>
</body>
結果：
3）、:first/last-of-type
:first/last-of-type匹配父元素的所有該子元素類型的第一個/最后一個元素。
語法：條件元素:first/last-of-type{ 樣式聲明 }
注意點：
1、語法 “ 條件元素:first/last-of-type{ 樣式聲明 } ” 實際需要滿足兩個條件才能進行 “ {} ” 內的樣式渲染：第一，要找到所有相同類型的條件元素；第二，對于每一種相同的類型，所有條件元素的第一個條件元素必須是父元素下該子元素類型的第一個子元素，所有條件元素的最后一個條件元素必須是父元素下該子元素類型的最后一個子元素。（注意與:first/last-child的區別）
舉例：
// html
<section>
<p>這是第1段</p>
<p class='spec'>這是第2段</p>
<div class='spec'>這是第一個div</div>
<p>這是第3段</p>
<p>這是第4段</p>
<p>這是第5段</p>
<p class='spec'>這是第6段</p>
<div class='spec'>這是第二個div</div>
<div>這是最后一個div</div>
</section>
// css
.spec:first-of-type{
background:#ddd;
}
.spec:last-of-type{
background:pink;
}
結果：
首先我們看到，有兩種類型的條件元素，分別為p、div。第一個p元素沒有spec類，所以 “ .spec:first-of-type{ background:#ddd; } ” 不生效，最后一個p元素有spec類，所以 “ .spec:last-of-type{ background:pink; } ” 生效；第一個div元素有spec類，所以 “ .spec:first-of-type{ background:#ddd; } ” 生效，最后一個div元素沒有spec類，所以 “ .spec:last-of-type{ background:pink; } ” 不生效。
2、:first/last-of-type在使用時不需要父包含塊。
4）、:nth-child/of-type、:nth-last-child/of-type
nth-child(an+b)可以匹配多個子元素，且子元素的順序與模式an+b匹配。第一個子元素的位置為1。
語法：元素:nth-child(an+b){ 樣式聲明 }
注意點：:nth-child的()中除了an+b外，還可以為odd（奇數，同2n+1）、even（偶數，同2n）。
:nth-last-child的用法同:nth-child，只不過它從后往前選擇元素，而:nth-child從前往后選擇元素。
:nth-of-type、:nth-last-of-type用法同:nth-child、:nth-last-child，但是必須是同類型子元素。
5）、:only-child、only-of-type
:only-child代表了屬于某個父元素的唯一一個子元素。
:only-of-type代表了任意一個元素，這個元素沒有其他相同類型的兄弟元素。
語法：元素:only-child/of-type{ 樣式聲明 }
6）、:empty
:empty可以在任何沒有子元素的元素上起作用。只有元素節點和文本（包括空格）在“子元素”這個概念的考慮范疇之內，注釋、運行指令不考慮。
語法：元素:empty{ 樣式聲明 }
舉例：
// html
<div class="box"><!-- I will be pink --></div>
<div class="box">I will be silver</div>
<div class="box">
<!-- I will be silver because of the whitespace around this comment -->
</div>
// css
.box {
background: #c0c0c0;
height: 200px;
width: 200px;
border:1px solid;
float:left;
}
.box:empty {
background: pink;
}
結果：
3、動態偽類選擇器
1）、:active
:active 匹配被用戶激活的元素。它讓頁面能在瀏覽器檢測到激活時給出反饋。當用鼠標交互時，它代表的是用戶按下按鍵和松開按鍵之間的時間。:active偽類通常用來匹配tab鍵交互。通常用于但不限于a標簽和button標簽。
語法：元素:active{ 樣式聲明 }
注意點：
1、:active代表的是用戶按下按鍵和松開按鍵之間的時間，時間很短，長按鼠標即可保持效果；
2、:active可能會被后聲明的其他鏈接相關的偽類覆蓋，這些偽類包括:link、:hover和:visited。為了正常加上樣式，需要把:active的樣式放在所有鏈接相關的樣式之后，這種鏈接偽類先后順序被稱為LVHA順序：:link—:visited—:hover—:active。舉例：
// html
<p>
這個鏈接在鼠標按下和松開的這段時間內會變成紅色:
<a href="#">Mozilla Developer Network</a>.
</p>
// css
/* 未訪問鏈接 */
a:link {
color: black
}
/* 已訪問鏈接 */
a:visited {
color: purple
}
/* 用戶鼠標懸停 */
a:hover {
font-weight: bold
}
/* 激活鏈接 */
a:active {
color: red
}
我們長按鼠標可以很清楚地看到效果：a標簽內的文字變為了紅色。
現在我們改變CSS中:active的順序，如：
// css
/* 未訪問鏈接 */
a:link {
color: black
}
/* 激活鏈接 */
a:active {
color: red
}
/* 已訪問鏈接 */
a:visited {
color: purple
}
/* 用戶鼠標懸停 */
a:hover {
font-weight: bold
}
我們長按鼠標時，文字卻不是紅色的。
總結：:active可能會被后聲明的其他鏈接相關的偽類覆蓋，所以為了正常加上樣式，需要遵循LVHA順序，把:active的樣式放在所有鏈接相關的樣式之后。
2）、:hover、:link、:visited
:hover可以在任何元素上使用。與:active類似，:hover會被任何與鏈接相關的偽類重寫，如:link、:visited、:active等。為了確保生效，:hover規則需要放在:link和:visited規則之后，但是在:active之前，遵循LVHA順序，即:link—:visited—:hover—:active。
語法：元素:hover{ 樣式聲明 }
:link、:visited用法同:hover，不再贅述。
3）、:focus
:focus在一個元素成為焦點時生效，用戶可以通過鍵盤或鼠標激活焦點。
語法：元素:focus{ 樣式聲明 }
4、狀態偽類選擇器
1）、:enabled、:disabled
:enabled表示任何啟用的（enabled）元素。如果一個元素能夠被激活（如選擇、點擊或接受文本輸入）或獲取焦點，則該元素是啟用的。元素還有一個禁用的狀態（disabled），在被禁用時，元素不能被激活或獲取焦點。
語法：元素:enabled{ 樣式聲明 }
元素:disabled{ 樣式聲明 }
2）、:checked
:checked用于radio、checkbox、option這三個標簽的被選中元素。
語法：元素:checked{ 樣式聲明 }
舉例：
//html
<body>
<input type="radio" name='test' value='A'><span>A</span>
<input type="radio" name='test' value='B'><span>B</span>
<input type="checkbox" name='test' value='A'><span>A</span>
<input type="checkbox" name='test' value='B'><span>B</span>
<select name="test" id="">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</body>
// css
input[type="radio"]:checked+span {
color:red;
}
input[type="checkbox"]:checked+span{
color:red;
}
select[name="test"]>option:checked{
color:red;
}
結果：
3）、:required、:optional
:required表示任意擁有required屬性的<input>或<textarea>元素使用它。它允許表單在提交之前容易地展示必選字段并且渲染其外觀。
:optional表示任意沒有required屬性的<input>或<textarea>元素使用它。它允許表單容易地展示可選字段并且渲染其外觀。
語法：元素:required{ 樣式聲明 }
元素:optional{ 樣式聲明 }
4）、:valid、:invalid
:valid表示任何其內容可以根據設置的輸入類型正確地驗證<input>或<form>元素，有助于用戶確認其數據格式是否正確。
:invalid表示任何<input>或<form>元素的內容無法通過輸入的類型設置的驗證。這使您可以輕松設置無效字段的外觀，幫助用戶設別并更正錯誤。
語法：元素:valid{ 樣式聲明 }
元素:invalid{ 樣式聲明 }
舉例：
// html
<input type="email">
// css
input:valid{
outline:0;
color:green;
}
input:invalid{
outline:0;
color:red;
}
結果：
5）、:placeholder-shown
:placeholder-shown適用于所有有placeholder屬性的元素。
語法：元素:placeholder-shown{ 樣式聲明 }
6）、:read-only、:read-wirte
:read-only表示不可被編輯的元素。
:read-wirte表示可以被編輯的元素。
語法：元素:read-only{ 樣式聲明 }
元素:read-wirte{ 樣式聲明 }
舉例：
// html
<input type="text" value='Type whatever you want here.'>
<input type="text" value='This is a read-only field.' readonly>
// css
input:read-only{
background:#ddd;
}
input:read-write{
background:lightcyan;
}
結果：
7）、:in-range、:out-of-range
:in-range表示不可被編輯的元素。
:out-of-range表示可以被編輯的元素。
語法：元素:in-range{ 樣式聲明 }
元素:out-of-range{ 樣式聲明 }
舉例：
// html
<input type="number" placeholder='1 to 10' min='1' max='10' value='0'>
// css
input:in-range{
color:blue;
}
input:out-of-range{
color:red;
}
結果：
5、語言偽類選擇器
1）、:lang
在HTML中，文檔的語言由lang屬性、<meta>標簽、協議中攜帶的語言信息（比如HTTP協議頭）共同決定。
語法：元素:lang(語言代碼){ 樣式聲明 }
舉例：
// html
<body>
很高興見到你，<span lang='en'>Caroline.</span>
</body>
// css
span:lang(en){
font-style: italic;
}
結果：
6、否定偽類選擇器
1）、:not()
:not(X)，是以一個簡單的X選擇器為參數的功能性標記函數。它匹配不符合參數選擇器X描述的元素。X不能包含另外一個否定選擇器。
語法：元素:not(選擇器){ 樣式 }
注意點：
1、:not()偽類的優先級即為它參數選擇器的優先級。:not()不像其它偽類，它不會增加選擇器的優先級。
2、:not(X)將匹配任何非X元素，包括html和body。
3、利用這個偽類可以重寫其它規則。例如，foo:not(bar)和foo將匹配同樣的元素，但是前者的優先級更高。
4、這個選擇器只會應用在一個元素上，你不能用它排除所有祖先元素。例如，body:not(table) a將依舊會應用在table內部的a標簽上，因為<tr>將會被:not()這部分選擇器匹配。
5、利用這個偽類可以寫一個完全沒有用處的選擇器。例如，:not(*)匹配任何費元素的元素，因此這個規則永遠不會被應用。
舉例：
// html
<p>Some text.</p>
<p class="classy">Some other text.</p>
<span>One more text<span>
// css
p:not(.classy) {
color: red;
}
body :not(p) {
color: blue;
}
結果：
另，在打印文檔時可以使用:first、:left、:right等偽類選擇器進行文本樣式設置。
四、偽元素
1、::before、::after
::before會為當前元素創建一個子元素作為偽元素。常通過content屬性來為一個元素添加修飾性的內容。此元素默認為行內元素。
::after用來匹配已選中元素的一個虛擬的最后子元素。常通過content屬性來為一個元素添加修飾性的內容。此元素默認為行內元素。
語法：元素::before{ content:'xxx'; ...... }
元素::after{ content:'xxx';...... }
注意點：
1、::before、::after創建的元素是該元素的子元素。所有有子元素的標簽（如input標簽就沒有子元素）都默認有這兩個子元素。
2、::before、::after創建的元素無法用鼠標選中！！
舉例：
// html
<span>今天天氣很好。</span>
我也覺得天氣很好。
// css
span::before{
content:'周一';
background:#ddd;
font-weight:bold;
}
span::after{
content:'是的';
display:block;
background:pink;
color:red;
font-weight:bold;
}
結果：
我們看到，“周一”和“是的”這兩個偽元素無法用鼠標選中。
2、::first-letter
::first-letter會選中一整塊文字第一行的第一個字母。
語法：元素::first-letter{ 樣式聲明 }
注意點：首行只有在block-container box內部才有意義，因此，::first-letter偽元素只在display屬性值為block、inline-block、table-cell、list-item或者table-caption的元素上才起作用，其他情況下，::first-letter毫無意義。
3、::first-line
::first-line只應用于一個元素的首行。
語法：元素::first-line{ 樣式聲明 }
注意點：::first-line只能在塊容器中，因此，::first-letter偽元素只在display屬性值為block、inline-block、table-cell、list-item或者table-caption的元素上才起作用，其他情況下，::first-line不起作用。
五、優先級
優先級就是分配給指定的CSS聲明的一個權重，它由匹配的選擇器中的每一種選擇器類型的數值決定。當同一個元素有多個聲明時，優先級最高的聲明將會被應用到元素上。下面我們就來看看這個權重該怎樣計算。
CSS樣式選擇器分為四個等級，從高到低依次為a、b、c、d：
- 如果樣式是行內樣式（通過style="..."定義），則a=1；
- b為ID選擇器的總數；
- c為class類選擇器（例如：.example）、屬性選擇器（例如：[type="radio"]）、偽類選擇器（例如：::hover）的總數；
- d為元素選擇器（例如：h1）和偽元素選擇器（例如::before）的總數。
一些例子：
| 選擇器 | 權重(a,b,c,d) |
|---|---|
| style='xxx' | 1,0,0,0 |
| #wrapper #content {} | 0,2,0,0 |
| #content .example{} | 0,1,1,0 |
| div#content {} | 0,1,0,1 |
| #content p {} | 0,1,0,1 |
| #content {} | 0,1,0,0 |
| p.comment .example{} | 0,0,2,1 |
| div.comment p {} | 0,0,1,2 |
| .comment p {} | 0,0,1,1 |
| p.comment {} | 0,0,1,1 |
| .comment {} | 0,0,1,0 |
| div p {} | 0,0,0,2 |
| p{} | 0,0,0,1 |
上面的例子中，優先級依次遞減。我們可以把這個“權重”理解為十進制數字，數字越大，則優先級越高。
注意點：
1、通配選擇器（*）、組合選擇器（例如：+、~、>）和否定偽類（:not()）不會影響優先級（但是，:not()內部聲明的選擇器會影響優先級）。
2、!important優先級最高，高于行內樣式。
舉例：
// html
<body>
<div class="parent">
<span class="child" style='color:yellow;'>Caroline,</span>
<span>nice to meet you.</span>
</div>
</body>
// css
.parent>span{
color:red !important;
}
span.child{
color:blue;
}
結果：
如果不添加!important，style='color:yellow;'的優先級高于span.child，span.child又高于.parent>span，所以行內樣式應該生效，字體應該變成黃色；給.parent>span添加!important后，實際上“破壞”了CSS的優先級規則。所以!important應盡量避免使用！
3、優先級是基于選擇器的形式進行計算的。
舉例：
// html
<body>
<p id="foo">I am a sample text.</p>
</body>
// css
* #foo {
color: green;
}
*[id="foo"] {
color: purple;
}
結果：
在上面的例子中，盡管選擇器[id="foo"]選擇了一個ID，但它還是作為一個屬性選擇器來計算自己的優先級。
4、無視DOM樹中的距離。
舉例：
// html
<body>
<h1>Here is a title!</h1>
</body>
// css
body h1 {
color: green;
}
html h1 {
color: purple;
}
結果：
優先級總結：
1、按照權重來確定優先級；
2、優先級相同時，后面的會覆蓋前面；
3、!important優先級最高。
關于CSS選擇器和優先級就先寫到這里，總的來說還是比較全面的。這部分不難，就是內容挺多，需要經常回顧，免得自己忘了。
由于個人水平有限，博客錯誤之處，煩請指正！
參考資料：
1、MDN：CSS選擇器
2、MDN：優先級
3、CSS選擇器優先級
