## 一、偽類選擇器 &emsp;&emsp;偽選擇器彌補了常規選擇器的不足，能夠實現一些特殊情況下的樣式，例如在鼠標懸停時或只給字符串中的第一個字符指定樣式。與類選擇器類似，可以從HTML元素的class屬性中查看到，但偽選擇器不會出現在HTML文檔中（有幾個例外,如:lang、::placeholder等）。并且它的關鍵字大小寫不敏感，也就是說empty和EMPTY完全相同。偽選擇器分為兩種：偽類選擇器和偽元素選擇器。注意，偽選擇器會以一個或兩個冒號（:）開頭，并且如果要與其它選擇器組合使用，那么只能與類型選擇器（即元素名）搭配。 &emsp;&emsp;本節要介紹的是偽選擇器的第一種：偽類選擇器（pseudo-class selector），它用于描述元素的動態特征，再根據元素的特殊狀態來選擇元素，常用的有結構、鏈接和表單等偽類。注意，偽類只對它依附的元素起作用，并且多個偽類可拼接在一起。 **1）結構偽類** &emsp;&emsp;CSS3新增了許多與結構相關的偽類，例如:root和:empty。:root會匹配文檔的根元素，而在HTML文檔中，根元素是html。 &emsp;&emsp;:empty匹配沒有子元素的元素，包括文本節點，但不包括注釋。下面三個p元素，只有第一個和第三個符合:empty的匹配條件。 ~~~html <p></p> <p> </p> <p><!--注釋--></p> ~~~ &emsp;&emsp;:first-child匹配一組兄弟元素中的第一個元素，而:last-child可匹配其中的最后一個。:first-of-type匹配一組兄弟元素中的某種類型的第一個元素，而:last-of-type可匹配其中的最后一個。 &emsp;&emsp;以下面的HTML結構為例，p是三個元素中的第一個，因此可以使用p:first-child；而div并不在第一的位置上，因此div:first-child無效；但是div是該類型的第一個元素，因此可用:first-of-type匹配。 ~~~html <style> p:first-child { background: #FC0; } div:first-child { background: #000; } div:first-of-type { background: #666; } </style> <p>1</p> <div>2</div> <section>3</section> ~~~ &emsp;&emsp;:only-child匹配沒有兄弟的元素，即該元素是另一個元素的唯一子元素。例如下面有兩個p元素，采用:only-child偽類時，只有第一個符合匹配條件。 ~~~html <style> p:only-child { background: #F60; } </style> <div> <p>1</p> </div> <p>2</p> ~~~ &emsp;&emsp;注意，將:first-child和:last-child兩個偽類拼接，其效果相當于:only-child。 &emsp;&emsp;:only-of-type匹配沒有相同類型的兄弟元素，如果將:only-of-type依附到上面HTML結構中的p元素上，那么兩個p元素都能匹配。 &emsp;&emsp;:nth-child()會找出該元素的所有兄弟元素，然后按照位置匹配。它類似于一個函數，可接收整數和表達式，并將計算結果作為元素所處的位置。下面有3個li元素，:nth-child(1)匹配第一個元素，相當于:first-child；第二個:nth-child()偽類接收一個2n表達式，其中n的取值從0開始，一直到無窮大，2n表示取偶數位置的li元素，下面的li元素只有第二個符合條件。 ~~~html <style> li:nth-child(1) { background: #666; } li:nth-child(2n) { background: #F60; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> ~~~ &emsp;&emsp;:nth-last-child()的功能與:nth-child()類似，只是地從后往前匹配。 &emsp;&emsp;:nth-of-type()的功能與:nth-child()相似，但需要限制元素類型（即匹配相同類型的元素），它可接收的參數與:nth-child()相同。以下面的HTML結構為例，p:nth-of-type(2n)會先過濾出p元素，然后再匹配偶數位置的p元素。雖然第一個p元素在HTML結構中所處的是偶數位置，但是在同類型的兄弟元素中所處的卻是奇數位置，因此無法匹配。 ~~~html <style> p:nth-of-type(2n) { background: #FC0; } </style> <section>1</section> <p>2</p> <p>3</p> <div>4</div> ~~~ &emsp;&emsp;與:nth-of-type()對應的是:nth-last-of-type()，需要從后往前匹配。 **2）鏈接偽類** &emsp;&emsp;在鏈接元素中，常用的4個偽類有未訪問（:link）、已訪問（:visited）、激活（:active）和懸停（:hover），分別表示4種狀態。它們的聲明順序推薦使用LVHA，通常這4個偽類會使用同一個源聲明，4個偽類的特殊性（將在第二章講解）也相同，如下代碼所示，因此影響權重的只有在樣式表中所處的位置了。 ~~~css a:link { color: blue; } a:visited { color: red; } a:hover { color: green; } a:active { color: yellow; } ~~~ &emsp;&emsp;當鼠標懸浮在未訪問或已訪問鏈接的時候，都會同時存在兩種狀態，:link與:hover或:visited與:hover。如果:hover聲明在:link或:visited之前，那么就會被覆蓋掉。當鼠標點中鏈接的時候，會同時存在兩種狀態，:active與:hover。如果:active聲明在:hover之前，那么會被覆蓋掉。因此:hover與:active必須在:link與:visited之后，而:active必須在:hover之后，至于:link與:visited，它們兩個的順序可以互換。將LVHA記成兩個單詞的組合，love和hate，能更易于記憶。 &emsp;&emsp;還有一種:focus偽類更多地用于表單元素，可在元素聚焦時生效，例如為文本框添加:focus，如下所示。在下圖中，右邊是獲得輸入焦點時文本框的樣式。 ~~~html <style> input:focus { background: #F60; } </style> <input type="text" /> ~~~  **3）表單偽類** &emsp;&emsp;這種偽類專門服務于表單控件，根據用戶與表單控件的交互，來反映其某種狀態。 &emsp;&emsp;:enabled和:disabled分別應用于控件的啟用和禁用狀態，如下代碼所示，文本框默認是啟用狀態，第二個文本框設置了disabled屬性，變成禁用狀態。 ~~~html <style> input:enabled { background: #FC0; } input:disabled { background: #000; } </style> <input type="text"/> <input type="text" disabled/> ~~~ &emsp;&emsp;:checked應用于單選框或復選框的選中狀態。:required和:optional應用于控件的必選和可選狀態，即前者可匹配帶有required屬性的控件，而后者正好相反。 &emsp;&emsp;:valid和:invalid用于驗證文本框中的數據是否有效，前者是有效，后者是無效，例如將文本框的格式限制為電子郵件，當格式不正確時，修改文本框的背景，如下所示。 ~~~html <style> input[type=email]:invalid { background: #F60; } </style> <input type="email"/> ~~~ &emsp;&emsp;:read-write和:read-only應用于文本框的讀寫和只讀狀態，如下代碼所示，文本框默認是讀寫狀態，第二個文本框設置了readonly屬性，變成只讀狀態。 ~~~html <style> input:read-write { background: #FC0; } input:read-only { background: #F60; } </style> <input type="text"/> <input type="text" readonly/> ~~~ &emsp;&emsp;:in-range和:out-of-range應用于數值類型的文本框，如果當前值處于min和max兩個屬性限定的范圍之內，那么可使用:in-range裝飾，否則使用:out-of-range。在下面的示例中，當輸入0或6時，文本框的背景就會改變。 ~~~html <style> input[type=number]:out-of-range { background: #F60; } </style> <input type="number" min="1" max="5"/> ~~~ **4）其它偽類** &emsp;&emsp;URL的錨點指向的目標元素可以用:target裝飾，例如有一個h3元素（如下所示），其id屬性的值為title，當URL是http://www.pwstrick.com#title時，就會改變h3元素的字體顏色。 ~~~html <style> h3:target { color: #FC0; } </style> <h3 id="title">:target</h3> ~~~ &emsp;&emsp;:lang()會基于語言來匹配元素，在HTML中，語言可以通過lang屬性、meta元素或協議的信息來確定（例如HTTP首部）。下面兩個p元素，只有用英語編寫的元素才會被加粗。 ~~~html <style> p:lang(en) { font-weight: bold; } </style> <p lang="en">My name is Strick</p> <p lang="fr">My name is Strick</p> ~~~ &emsp;&emsp;:not()是一種反選偽類，它能接收一個簡單的選擇器，例如類型、屬性、通配等，不能接收偽類、偽元素和群組選擇器。在下面的示例中，會為非p元素改變字體顏色。 ~~~html <style> :not(p) { color: #FC0; } </style> <span>1</span> <p>2</p> <div>3</div> ~~~ &emsp;&emsp;注意，:not()偽類不能嵌套，但是能串聯，如下代碼所示，其中:not(p):not(span)表示一種或的關系，即匹配的元素即不能是p，也不能是span。 ~~~css /* 正確 */ :not(p):not(span) { color: #FC0; } /* 錯誤 */ :not(p, span) { color: #FC0; } ~~~ ## 二、偽元素選擇器 &emsp;&emsp;偽元素選擇器（pseudo-element selector）用于處理文檔內容，可指定某處的內容（即過濾內容）或添加內容。早期的時候，偽元素和偽類都使用單冒號（:）。但最新的CSS3規定偽元素得使用雙冒號（::），偽類用單冒號，這樣兩者的區分能更明顯。注意，偽元素只能出現在選擇器的最后位置，并且不能同時定義多個偽元素。 **1）過濾內容的偽元素** &emsp;&emsp;::first-letter會匹配塊級元素內容的第一行的首字符，下面的p元素包含一段文本，首字母“s”的字體會擴大一倍。 ~~~html <style> p::first-letter { font-size: 200%; } </style> <p>strick</p> ~~~ &emsp;&emsp;當::first-letter依附的元素同時還指定了::before時，它會匹配content屬性中的首字符，如下所示，被擴大的不是“s”而是“i”。 ~~~html <style> div::first-letter { font-size: 200%; } div::before { content: "is"; } </style> <div>strick</div> ~~~ &emsp;&emsp;若要匹配塊級元素內容的第一行，可以使用::first-line，例如將第一行加粗，如下所示。 ~~~html <style> p::first-line { font-weight: bold; } </style> <p>My name is Strick.I am from China.</p> ~~~ &emsp;&emsp;::first-letter和::first-line對可使用的屬性也做了限制，例如字體、背景等屬性允許使用。 &emsp;&emsp;其它常用的偽元素還有::placeholder和::selection，前者可自定義表單控件占位文本的樣式，后者可裝飾選中內容（即被用戶高亮的部分）。下面文本框定義了placeholder屬性并聲明了::placeholder偽元素，占位文本會變成紅色。 ~~~html <style> input::placeholder { color: red; } </style> <input type="text" placeholder="請輸入"/> ~~~ **2）添加內容的偽元素** &emsp;&emsp;::before可在元素之前插入修飾性的內容，::after可在元素之后插入修飾性的內容，兩個偽元素創建出的虛擬元素默認為行內元素。下面的p元素聲明了::before和::after，經過拼接后，在頁面上顯示的文本為“I am Strick”。 ~~~html <style> p::before { content: "I " } p::after { content: " Strick" } </style> <p>am</p> ~~~ &emsp;&emsp;注意，::before 和::after不能應用于替換元素，例如img、input等。 ***** > 原文出處： [博客園-CSS躬行記](https://www.cnblogs.com/strick/category/1667864.html) [知乎專欄-CSS躬行記](https://zhuanlan.zhihu.com/pwcss) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。