2.6 语言伪类选择器

使用语言伪类选择器来匹配使用语言的元素是非常有用的，特别是用于多语言版本的网站，其作用更是明显。可以使用它来根据不用语言版本设置页面的字体风格。

2.6.1 语言伪类选择器语法

语言伪类选择器是根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者与文档关联，不能从CSS指定。为文档指定语言，有两种方法可以表示。如果使用HTML5，直接可以设置文档的语言。例如：

另一种方法就是手工在文档中指定lang属性，并设置对应的语言值。例如：

语言伪类选择器允许为不同的语言定义特殊的规则，这在多语言版本的网站用起来是特别方便的。 E.lang(language)表示选择匹配E的所以元素，且匹配元素指定了lang属性，而且其值为language。

2.6.2 浏览器兼容性

语言伪类选择器在IE7及以下版本中还不被支持。

2.6.3 实战体验：定制不用语言版本引文风格

    
            
WWF's goal is to:            build a future where people live in harmony with nature    we hope they succeed.    

    
            
WWF's goal is to:            build a future where people live in harmony with nature    we hope they succeed.    

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文档。

    
            
    
        
     
            
      
one
            
      
two
            
      
three
        
     
        
     
      abc
     
        
     
para
        
     
      def
     
        
     
para
        
     ghi    
    

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 结构伪类选择器的使用方法详解

    
                
    
        
     
1
     
2
     
3
     
4
     
5
     
6
     
7
     
8
     
9
     
10
     
11
     
12
     
13
     
14
     
15
     
16
     
17
     
18
     
19
     
20
/ul>
    

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