一、偽類選擇器

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

&n