2.6 語言偽類選擇器
使用語言偽類選擇器來匹配使用語言的元素是非常有用的椰苟，特別是用于多語言版本的網站，其作用更是明顯舆蝴。可以使用它來根據不用語言版本設置頁面的字體風格洁仗。
2.6.1 語言偽類選擇器語法
語言偽類選擇器是根據元素的語言編碼匹配元素。這種語言信息必須包含在文檔中叫胖，或者與文檔關聯她奥，不能從CSS指定疲陕。為文檔指定語言，有兩種方法可以表示蹄殃。如果使用HTML5你踩，直接可以設置文檔的語言。例如：
<!DOCTYPE html>
<html lang="en-US">
另一種方法就是手工在文檔中指定lang屬性带膜，并設置對應的語言值。例如：
<body lang="fr">
語言偽類選擇器允許為不同的語言定義特殊的規(guī)則式廷，這在多語言版本的網站用起來是特別方便的。
E.lang(language)表示選擇匹配E的所以元素滑废，且匹配元素指定了lang屬性袜爪，而且其值為language。
2.6.2 瀏覽器兼容性
語言偽類選擇器在IE7及以下版本中還不被支持辛馆。
2.6.3 實戰(zhàn)體驗：定制不用語言版本引文風格
<!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元素狀態(tài)偽類選擇器
UI元素狀態(tài)偽類選擇器也是CSS3選擇器模塊組中的一部分昙篙，主要用于form 表單元素上，以提高網頁的人機交互苔可、操作邏輯以及頁面的整體美觀，使表單頁面更具個性與品位醇疼，而且使用戶操作頁面表單更便利和簡單硕并。
2.7.1 UI元素狀態(tài)偽類選擇器語法
UI元素的狀態(tài)一般包括：啟用、禁用埃仪、選中陕赃、未選中卵蛉、獲得焦點、失去焦點甘有、鎖定和待機等葡缰。在HTML元素中有可用和不可用狀態(tài)，例如表單中的文本輸入框泛释；HTML元素中海油選中和未選中狀態(tài)，例如表單中的復選按鈕和單選按鈕怜校。這幾種狀態(tài)都是CSS3選擇器中常用的狀態(tài)偽類選擇器。詳細說明如下所示：
| 選擇器 | 類型 | 功能描述 |
|---|---|---|
E:cheched |
選中狀態(tài)偽類選擇器 | 匹配選中的復選按鈕或單選按鈕表單元素 |
E:enabled |
啟用狀態(tài)偽類選擇器 | 匹配所有啟用的表單元素 |
E:disabled |
不可用狀態(tài)偽類選擇器 | 匹配所有禁用的表單元素 |
2.7.2 瀏覽器兼容性
除了IE瀏覽器外魂贬，各主流瀏覽器對UI元素狀態(tài)選擇器的支持都非常好胰丁，但IE9頁開始全面支持這些UI元素狀態(tài)偽類選擇器。
2.7.3 實戰(zhàn)體驗：Bootstrap的表單元素UI狀態(tài)
略（p37-p41） 太長了/(ㄒoㄒ)/~~
2.8 結構偽類選擇器
偽類可以將一段并不存在的HTML當作獨立元素來定位锦庸，或是找到無法使用其他簡單選擇器就能定位到的切實存在的元素。因此CSS3給偽類選擇器引入一種“結構偽類選擇器”萝嘁。這種選擇器可以根據元素在文檔樹中的某些特性（如相對位置）定位到它們。也就是說牙言，通過文檔樹結構的相互關系來匹配特定的元素怪得，從而減少HTML文檔對ID或類名的定義， 幫助你保持干凈和整潔徒恋。
2.8.1 重溫HTML的DOM樹
所有的結構偽類都是基于HTML文檔樹的，也稱作文檔對象模型（DOM）入挣。文檔樹是HTML頁面的層級結構亿乳。它由元素、屬性和文本組成障陶，它們都是一個節(jié)點聊训，就像公司的組織結構圖一樣抱究。下面看一個簡單的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 |
選擇沒有子元素的元素能犯，而且該元素也不包含任何文本節(jié)點 |
2.8.3 瀏覽器兼容性
CSS3結構偽類選擇器在主流瀏覽器下運行都非常的完美犬耻，只是在IE9及以下版本的瀏覽器中無法正常運行。
2.8.4 結構偽類選擇器中的n是什么
在結構偽類選擇器中枕磁，有4個偽類選擇器接受參數n。
:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n)
在實際應用中茸苇，這個參數n可以是整數（1，2学密，3），關鍵字（even腻暮，odd），可以是公式（2n+1西壮，-n+5）叫惊，而且n值起始值為1款青，而不是0霍狰。換句話說，當參數n的值為0時蔗坯，選擇器將選擇不到任何匹配的元素宾濒。
結構偽類選擇器中的參數按常用的情況劃分為七種情形腿短。
- 參數n為具體的數值（大于0的整數）
- 參數n為表達式"
n * length"（選擇n的倍數） - 參數n為表達式"
n + length"（選擇大于或等于length的元素） - 參數n為表達式"
-n + length"（選擇小于或等于length的元素） - 參數n為表達式"
n * length + b"（其中b是您想設置的偏移值橘忱，表示隔length個元素選中第n * length + b個元素。） - 參數為關鍵詞“
odd”（選擇系列中的奇數元素） - 參數為關鍵詞“
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 實戰(zhàn)體驗：CSS3美化表格
略（p61-p66） 太長了/(ㄒoㄒ)/~~
