##2.6 語言偽類選擇器
使用語言偽類選擇器來匹配使用語言的元素是非常有用的，特別是用于多語言版本的網站，其作用更是明顯。可以使用它來根據不用語言版本設置頁面的字體風格。
###2.6.1 語言偽類選擇器語法
語言偽類選擇器是根據元素的語言編碼匹配元素。這種語言信息必須包含在文檔中，或者與文檔關聯，不能從CSS指定。為文檔指定語言，有兩種方法可以表示。如果使用HTML5，直接可以設置文檔的語言。例如：
<!DOCTYPE html>
<html lang="en-US">
另一種方法就是手工在文檔中指定`lang`屬性，并設置對應的語言值。例如：
<body lang="fr">
語言偽類選擇器允許為不同的語言定義特殊的規則，這在多語言版本的網站用起來是特別方便的。
`E.lang(language)`表示選擇匹配E的所以元素，且匹配元素指定了`lang`屬性，而且其值為`language`。
###2.6.2 瀏覽器兼容性
語言偽類選擇器在IE7及以下版本中還不被支持。
###2.6.3 實戰體驗：定制不用語言版本引文風格
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>語言偽類選擇器運用</title>
</head>
<body>
<p>WWF's goal is to:
<q cite="http://www.wwwf.org">
build a future where people live in harmony with nature
</q>we hope they succeed.
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>語言偽類選擇器運用</title>
</head>
<body>
<p>WWF's goal is to:
<q cite="http://www.wwwf.org">
build a future where people live in harmony with nature
</q>we hope they succeed.
</p>
</body>
</html>
##2.7 UI元素狀態偽類選擇器
UI元素狀態偽類選擇器也是CSS3選擇器模塊組中的一部分，主要用于form 表單元素上，以提高網頁的人機交互、操作邏輯以及頁面的整體美觀，使表單頁面更具個性與品位，而且使用戶操作頁面表單更便利和簡單。
###2.7.1 UI元素狀態偽類選擇器語法
> UI元素的狀態一般包括：啟用、禁用、選中、未選中、獲得焦點、失去焦點、鎖定和待機等。在HTML元素中有可用和不可用狀態，例如表單中的文本輸入框；HTML元素中海油選中和未選中狀態，例如表單中的復選按鈕和單選按鈕。這幾種狀態都是CSS3選擇器中常用的狀態偽類選擇器。詳細說明如下所示：
| 選擇器 | 類型 | 功能描述 |
| --- | --- | --- |
| `E:cheched` | 選中狀態偽類選擇器 | 匹配選中的復選按鈕或單選按鈕表單元素 |
| `E:enabled` | 啟用狀態偽類選擇器 | 匹配所有啟用的表單元素 |
| `E:disabled` | 不可用狀態偽類選擇器 | 匹配所有禁用的表單元素 |
###2.7.2 瀏覽器兼容性
除了IE瀏覽器外，各主流瀏覽器對UI元素狀態選擇器的支持都非常好，但IE9頁開始全面支持這些UI元素狀態偽類選擇器。
###2.7.3 實戰體驗：Bootstrap的表單元素UI狀態
略（p37-p41） 太長了`/(ㄒoㄒ)/~~`
##2.8 結構偽類選擇器
偽類可以將一段并不存在的HTML當作獨立元素來定位，或是找到無法使用其他簡單選擇器就能定位到的切實存在的元素。因此CSS3給偽類選擇器引入一種“結構偽類選擇器”。這種選擇器可以根據元素在文檔樹中的某些特性（如相對位置）定位到它們。也就是說，通過文檔樹結構的相互關系來匹配特定的元素，從而減少HTML文檔對ID或類名的定義， 幫助你保持干凈和整潔。
###2.8.1 重溫HTML的DOM樹
所有的結構偽類都是基于HTML文檔樹的，也稱作文檔對象模型（DOM）。文檔樹是HTML頁面的層級結構。它由元素、屬性和文本組成，它們都是一個節點，就像公司的組織結構圖一樣。下面看一個簡單的HTML文檔。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM樹形結構圖</title>
</head>
<body>
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div>abc</div>
<p>para</p>
<div>def</div>
<p>para</p>
<b>ghi</b>
</div>
</body>
</html>
###2.8.2 結構偽類選擇器語法
| 選擇器 | 功能描述 |
| --- | --- |
| `E:first-child` | 作為父元素的第一個子元素的元素E。與`E:nth-child(1)`等同 |
| `E:last-child` | 作為父元素的最后一個子元素的元素E。與`E:nth-last-child(1)`等同 |
| `E:root` | 選擇匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是html，此時該選擇器與html類型選擇器匹配的內容相同 |
| `E F:nth-child(n)` | 選擇父元素E的第n個子元素F。其中n可以是整數（1，2，3），關鍵字（even，odd），可以是公式（2n+1，-n+5），而且n值起始值為1，而不是0 |
| `E F:nth-last-child(n)` | 選擇元素E的倒數第n個子元素F。此選擇器與`E F:nth-child(n)`選擇器計算順序剛好相反，但使用方法都是一樣的，其中`nth-last-child(1)`始終匹配的是最后一個元素，與`last-child`等同 |
| `E:nth-of-type(n)` | 選擇父元素內具有指定類型的第n個E元素 |
| `E:nth-last-of-type(n)` | 選擇父元素內具有指定類型的倒數第n個E元素 |
| `E:first-of-type` | 選擇父元素內具有指定類型的第一個E元素，與`E:nth-of-type(1)`等同 |
| `E:last-of-type` | 選擇父元素內具有指定類型的倒數第一個E元素，與`E:nth-last-of-type(1)`等同 |
| `E:only-child` | 選擇父元素只包含一個子元素，且該子元素匹配E元素 |
| `E:only-of-type` | 選擇父元素只包含一個同類型的子元素，且該子元素匹配E元素 |
| `E:empty` | 選擇沒有子元素的元素，而且該元素也不包含任何文本節點 |
###2.8.3 瀏覽器兼容性
CSS3結構偽類選擇器在主流瀏覽器下運行都非常的完美，只是在IE9及以下版本的瀏覽器中無法正常運行。
###2.8.4 結構偽類選擇器中的n是什么
在結構偽類選擇器中，有4個偽類選擇器接受參數n。
1. `:nth-child(n)`
2. `:nth-last-child(n)`
3. `:nth-of-type(n)`
4. `:nth-last-of-type(n)`
**在實際應用中，這個參數n可以是整數（1，2，3），關鍵字（even，odd），可以是公式（2n+1，-n+5），而且n值起始值為1，而不是0。換句話說，當參數n的值為0時，選擇器將選擇不到任何匹配的元素。**
> 結構偽類選擇器中的參數按常用的情況劃分為七種情形。
1. 參數n為具體的數值（大于0的整數）
2. 參數n為表達式"`n * length`"（選擇n的倍數）
3. 參數n為表達式"`n + length`"（選擇大于或等于length的元素）
4. 參數n為表達式"`-n + length`"（選擇小于或等于length的元素）
5. 參數n為表達式"`n * length + b`"（其中b是您想設置的偏移值，表示隔length個元素選中第 `n * length + b`個元素。）
6. 參數為關鍵詞“`odd`”（選擇系列中的奇數元素）
7. 參數為關鍵詞“`even`”（選擇系列中的偶數元素）
###2.8.5 結構偽類選擇器的使用方法詳解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>結構偽類選擇器的使用</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
margin: 50px auto;
width: 400px;
list-style-type: none outside none;
}
li{
display: inline-block;
margin: 5px;
padding: 5px;
width: 50px;
height: 50px;
font: bold 30px/50px arial;
background: #000;
color: #fff;
border-radius: 50px;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>/ul>
</body>
</html>
######1. `:first-child`的使用
ul > li:first-child{
background-color: green;
}
######2. `:last-child`的使用
ul > li:last-child{
background-color: blue;
}
######3. `:nth-child`的使用
（1）`nth-child(3)`
ul > li:nth-child(3){
background-color: yellow;
}
（2）`nth-child(n)`
ul > li:nth-child(n){
background-color: orange;
}
（3）`nth-child(2n)`
ul > li:nth-child(2n){
background-color: blue;
}
（4）`nth-child(2n+1)`
ul > li:nth-child(2n+1){
background-color: blue;
}
（5）`nth-child(n+5)`
ul > li:nth-child(n+5){
background-color: blue;
}
（6）`nth-child(-n+5)`
ul > li:nth-child(-n+5){
background-color: blue;
}
（7）`nth-child(4n+1)`
ul > li:nth-child(4n+1){
background-color: blue;
}
######4. `:nth-last-child`的使用
ul > li:nth-last-child(4){
background-color: blue;
}
######5. `:nth-of-type`的使用【略】
######6. `:nth-last-of-type`的使用【略】
######7. `:first-of-type` 和 `:last-of-type`的使用【略】
######8. `:only-child`的使用【略】
######9. `:only-of-child`的使用【略】
######10. `:empty`的使用【略】
###2.8.6 實戰體驗：CSS3美化表格
略（p61-p66） 太長了`/(ㄒoㄒ)/~~`
