##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ㄒ)/~~`
