CSS躬行記（2）——偽類和偽元素

• 2020 年 4 月 7 日
• 筆記

一、偽類選擇器

　　偽選擇器彌補了常規選擇器的不足，能夠實現一些特殊情況下的樣式，例如在鼠標懸停時或只給字符串中的第一個字符指定樣式。與類選擇器類似，可以從HTML元素的class屬性中查看到，但偽選擇器不會出現在HTML文檔中（有幾個例外,如:lang、::placeholder等）。並且它的關鍵字大小寫不敏感，也就是說empty和EMPTY完全相同。偽選擇器分為兩種：偽類選擇器和偽元素選擇器。注意，偽選擇器會以一個或兩個冒號（:）開頭，並且如果要與其它選擇器組合使用，那麼只能與類型選擇器（即元素名）搭配。

　　本節要介紹的是偽選擇器的第一種：偽類選擇器（pseudo-class selector），它用於描述元素的動態特徵，再根據元素的特殊狀態來選擇元素，常用的有結構、鏈接和表單等偽類。注意，偽類只對它依附的元素起作用，並且多個偽類可拼接在一起。

1）結構偽類

　　CSS3新增了許多與結構相關的偽類，例如:root和:empty。:root會匹配文檔的根元素，而在HTML文檔中，根元素是html。

　　:empty匹配沒有子元素的元素，包括文本節點，但不包括注釋。下面三個p元素，只有第一個和第三個符合:empty的匹配條件。

<p></p>  <p>  </p>  <p><!--注釋--></p>

　　:first-child匹配一組兄弟元素中的第一個元素，而:last-child可匹配其中的最後一個。:first-of-type匹配一組兄弟元素中的某種類型的第一個元素，而:last-of-type可匹配其中的最後一個。

　　以下面的HTML結構為例，p是三個元素中的第一個，因此可以使用p:first-child；而div並不在第一的位置上，因此div:first-child無效；但是div是該類型的第一個元素，因此可用:first-of-type匹配。

<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>

　　:only-child匹配沒有兄弟的元素，即該元素是另一個元素的唯一子元素。例如下面有兩個p元素，採用:only-child偽類時，只有第一個符合匹配條件。

<style>    p:only-child {      background: #F60;    }  </style>  <div>    <p>1</p>  </div>  <p>2</p>

　　注意，將:first-child和:last-child兩個偽類拼接，其效果相當於:only-child。

　　:only-of-type匹配沒有相同類型的兄弟元素，如果將:only-of-type依附到上面HTML結構中的p元素上，那麼兩個p元素都能匹配。

　　:nth-child()會找出該元素的所有兄弟元素，然後按照位置匹配。它類似於一個函數，可接收整數和表達式，並將計算結果作為元素所處的位置。下面有3個li元素，:nth-child(1)匹配第一個元素，相當於:first-child；第二個:nth-child()偽類接收一個2n表達式，其中n的取值從0開始，一直到無窮大，2n表示取偶數位置的li元素，下面的li元素只有第二個符合條件。

<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>

　　:nth-last-child()的功能與:nth-child()類似，只是地從後往前匹配。

　　:nth-of-type()的功能與:nth-child()相似，但需要限制元素類型（即匹配相同類型的元素），它可接收的參數與:nth-child()相同。以下面的HTML結構為例，p:nth-of-type(2n)會先過濾出p元素，然後再匹配偶數位置的p元素。雖然第一個p元素在HTML結構中所處的是偶數位置，但是在同類型的兄弟元素中所處的卻是奇數位置，因此無法匹配。

<style>    p:nth-of-type(2n) {      background: #FC0;    }  </style>  <section>1</section>  <p>2</p>  <p>3</p>  <div>4</div>

　　與:nth-of-type()對應的是:nth-last-of-type()，需要從後往前匹配。

2）鏈接偽類

　　在鏈接元素中，常用的4個偽類有未訪問（:link）、已訪問（:visited）、激活（:active）和懸停（:hover），分別表示4種狀態。它們的聲明順序推薦使用LVHA，通常這4個偽類會使用同一個源聲明，4個偽類的特殊性（將在第二章講解）也相同，如下代碼所示，因此影響權重的只有在樣式表中所處的位置了。

a:link {    color: blue;  }  a:visited {    color: red;  }  a:hover {    color: green;  }  a:active {    color: yellow;  }

　　當鼠標懸浮在未訪問或已訪問鏈接的時候，都會同時存在兩種狀態，:link與:hover或:visited與:hover。如果:hover聲明在:link或:visited之前，那麼就會被覆蓋掉。當鼠標點中鏈接的時候，會同時存在兩種狀態，:active與:hover。如果:active聲明在:hover之前，那麼會被覆蓋掉。因此:hover與:active必須在:link與:visited之後，而:active必須在:hover之後，至於:link與:visited，它們兩個的順序可以互換。將LVHA記成兩個單詞的組合，love和hate，能更易於記憶。

　　還有一種:focus偽類更多地用於表單元素，可在元素聚焦時生效，例如為文本框添加:focus，如下所示。在下圖中，右邊是獲得輸入焦點時文本框的樣式。

<style>    input:focus {      background: #F60;    }  </style>  <input type="text" />

3）表單偽類

　　這種偽類專門服務於表單控件，根據用戶與表單控件的交互，來反映其某種狀態。

　　:enabled和:disabled分別應用於控件的啟用和禁用狀態，如下代碼所示，文本框默認是啟用狀態，第二個文本框設置了disabled屬性，變成禁用狀態。

<style>    input:enabled {      background: #FC0;    }    input:disabled {      background: #000;    }  </style>  <input type="text"/>  <input type="text" disabled/>

　　:checked應用於單選框或複選框的選中狀態。:required和:optional應用於控件的必選和可選狀態，即前者可匹配帶有required屬性的控件，而後者正好相反。

　　:valid和:invalid用於驗證文本框中的數據是否有效，前者是有效，後者是無效，例如將文本框的格式限制為電子郵件，當格式不正確時，修改文本框的背景，如下所示。

<style>    input[type=email]:invalid {      background: #F60;    }  </style>  <input type="email"/>

　　:read-write和:read-only應用於文本框的讀寫和只讀狀態，如下代碼所示，文本框默認是讀寫狀態，第二個文本框設置了readonly屬性，變成只讀狀態。

<style>    input:read-write {      background: #FC0;    }    input:read-only {      background: #F60;    }  </style>  <input type="text"/>  <input type="text" readonly/>

　　:in-range和:out-of-range應用於數值類型的文本框，如果當前值處於min和max兩個屬性限定的範圍之內，那麼可使用:in-range裝飾，否則使用:out-of-range。在下面的示例中，當輸入0或6時，文本框的背景就會改變。

<style>    input[type=number]:out-of-range {      background: #F60;    }  </style>  <input type="number" min="1" max="5"/>

4）其它偽類

　　URL的錨點指向的目標元素可以用:target裝飾，例如有一個h3元素（如下所示），其id屬性的值為title，當URL是http://www.pwstrick.com#title時，就會改變h3元素的字體顏色。

<style>    h3:target {      color: #FC0;    }  </style>  <h3 id="title">:target</h3>

　　:lang()會基於語言來匹配元素，在HTML中，語言可以通過lang屬性、meta元素或協議的信息來確定（例如HTTP首部）。下面兩個p元素，只有用英語編寫的元素才會被加粗。

<style>    p:lang(en) {      font-weight: bold;    }  </style>  <p lang="en">My name is Strick</p>  <p lang="fr">My name is Strick</p>

　　:not()是一種反選偽類，它能接收一個簡單的選擇器，例如類型、屬性、通配等，不能接收偽類、偽元素和群組選擇器。在下面的示例中，會為非p元素改變字體顏色。

<style>    :not(p) {      color: #FC0;    }  </style>  <span>1</span>  <p>2</p>  <div>3</div>

　　注意，:not()偽類不能嵌套，但是能串聯，如下代碼所示，其中:not(p):not(span)表示一種或的關係，即匹配的元素即不能是p，也不能是span。

/* 正確 */  :not(p):not(span) {    color: #FC0;  }  /* 錯誤 */  :not(p, span) {    color: #FC0;  }

二、偽元素選擇器

　　偽元素選擇器（pseudo-element selector）用於處理文檔內容，可指定某處的內容（即過濾內容）或添加內容。早期的時候，偽元素和偽類都使用單冒號（:）。但最新的CSS3規定偽元素得使用雙冒號（::），偽類用單冒號，這樣兩者的區分能更明顯。注意，偽元素只能出現在選擇器的最後位置，並且不能同時定義多個偽元素。

1）過濾內容的偽元素

　　::first-letter會匹配塊級元素內容的第一行的首字符，下面的p元素包含一段文本，首字母“s”的字體會擴大一倍。

<style>    p::first-letter {      font-size: 200%;    }  </style>  <p>strick</p>

　　當::first-letter依附的元素同時還指定了::before時，它會匹配content屬性中的首字符，如下所示，被擴大的不是“s”而是“i”。

<style>    div::first-letter {      font-size: 200%;    }    div::before {      content: "is";    }  </style>  <div>strick</div>

　　若要匹配塊級元素內容的第一行，可以使用::first-line，例如將第一行加粗，如下所示。

<style>    p::first-line {      font-weight: bold;    }  </style>  <p>My name is Strick.I am from China.</p>

　　::first-letter和::first-line對可使用的屬性也做了限制，例如字體、背景等屬性允許使用。

　　其它常用的偽元素還有::placeholder和::selection，前者可自定義表單控件佔位文本的樣式，後者可裝飾選中內容（即被用戶高亮的部分）。下面文本框定義了placeholder屬性並聲明了::placeholder偽元素，佔位文本會變成紅色。

<style>    input::placeholder {      color: red;    }  </style>  <input type="text" placeholder="請輸入"/>

2）添加內容的偽元素

　　::before可在元素之前插入修飾性的內容，::after可在元素之後插入修飾性的內容，兩個偽元素創建出的虛擬元素默認為行內元素。下面的p元素聲明了::before和::after，經過拼接後，在頁面上顯示的文本為“I am Strick”。

<style>    p::before {      content: "I "    }    p::after {      content: " Strick"    }  </style>  <p>am</p>

　　注意，::before 和::after不能應用於替換元素，例如img、input等。