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

1、僞類選擇器

　　僞選擇器彌補了常規選擇器的不足，可以實現一些特殊狀況下的樣式，例如在鼠標懸停時或只給字符串中的第一個字符指定樣式。與類選擇器相似，能夠從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;
}

2、僞元素選擇器

　　僞元素選擇器（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等。