2.7 伪类选择符和伪元素选择符
CSS选择符中除了包括基础选择符和层次选择符，还包括伪类选择符和伪元素选择符，正确地使用伪类选择符和伪元素选择符，可以使用户的HTML代码结构更加清晰合理，同时也能在一定程度上减少JavaScript对DOM的操作。
大家最熟悉的伪类选择符莫过于超链接的4种伪类选择符（:link、:hover、:visited和:active），因为这4种伪类选择符是在网页制作过程中经常用到的。而CSS 3的伪类选择符可以分为6种：动态伪类选择符、目标伪类选择符、语言伪类选择符、UI状态伪类选择符、结构伪类选择符和否定伪类选择符。
伪类选择符的语法规则与其他CSS选择符的有所区别，需要以英文冒号开头，语法规则如下：
其中，E为HTML中的元素，pseudo-class为CSS的伪类选择符名称。
2.7.1 动态伪类选择符
动态伪类选择符在最初的CSS中就有，并不是后来添加的，动态伪类并不存在于HTML中，只有当用户与网站页面交互的时候才能够体现出来。动态伪类有两种：一种是在超链接中经常看到的锚点伪类；另一种是用户行为伪类。动态伪类选择符的语法说明如表2-5所示。
表2-5 动态伪类选择符的语法说明
2.7.2 目标伪类选择符
目标伪类选择符“:target”是众多实用的CSS特性中的一个，用来匹配页面的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个井号，后面带有一个标签符名称，如#contact:target，就是用来匹配id名称为contact的元素的。换一种说法，在Web页面中，一些URL拥有片段标识符，它由一个井号后跟一个锚点或元素id组合而成，可以链接到页面中的某个特定元素。目标伪类选择符选取链接的目标元素，然后为该元素定义相应的CSS样式。
2.7.3 语言伪类选择符
语言伪类选择符是根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者与文档相关联，不能从CSS样式中指定。为HTML文档指定语言，可以在<html>标签或<body>标签中通过添加lang属性并设置相应的语言值进行设置。例如：
或
语言伪类选择符允许为不同的语言定义特殊的规则，这在多语言版本的网站中应用非常方便。语言伪类选择符的语法规则如下：
2.7.4 UI元素状态伪类选择符
UI元素状态伪类选择符也是CSS选择符模块组中的一部分，主要用于网页中的form表单元素，以提高网页的人机交互水平、操作逻辑性及页面的整体美观性，使表单页面更具个性与品位，并且使用户操作页面表单更简单。
UI元素的状态一般包括：启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等。在HTML元素中有可用和不可用状态，如表单中的文本输入框；HTML元素中还有选中和未选中状态，如表单中的复选按钮和单选按钮。这几种状态都是CSS选择符中常用的UI元素状态伪类选择符，其语法说明如表2-6所示。
表2-6 UI元素状态伪类选择符语法说明
2.7.5 结构伪类选择符
CSS选择符中包括结构伪类选择符，这种选择符可以根据元素在HTML文档树中的某些特性（如相对位置）定位到它们，也就是说，通过文档树结构的相互关系来匹配特定的元素，从而减少HTML文档对id名类名称的定义，帮助用户在制作HTML页面时保持页面代码的干净与整洁。
在使用结构伪类选择符之前，一定要清楚HTML文档的树状结构中元素之间的层级关系。结构伪类选择符的语法说明如表2-7所示。
表2-7 结构伪类选择符的语法说明
表2-7中所介绍的结构伪类选择符中，只有:first-child属于之前的CSS，结构伪类选择符为用户提供精确定位到元素的新方式。
2.7.6 伪类选择符浏览器适配
1．动态伪类选择符浏览器适配
动态伪类选择符的浏览器兼容性如表2-8所示。
表2-8 动态伪类选择符的浏览器兼容性
从表2-8中可以看出，大多数的主流浏览器都能够全面支持各种动态伪类选择符，需要注意的是，E:active和E:focus这两种动态伪类选择符只有IE8及其以上版本的IE浏览器才支持，而E:hover选择符在IE6及其以下版本的浏览器中仅支持超链接元素的hover伪类，而不支持其他元素的hover伪类。
E:active和E:focus这两种动态伪类选择符本身用处并不是很多，并且目前使用IE 9以下版本IE浏览器的用户也越来越少，所以基本上可以忽略IE浏览器的兼容性问题。
2．目标伪类选择符浏览器适配
目标伪类选择符的浏览器兼容性如表2-9所示。
表2-9 动态伪类选择符的浏览器兼容性
从表2-9中可以看出，大多数的主流浏览器都能够支持目标伪类选择符，主要是IE 9以下版本的IE浏览器不支持目标伪类选择符，但IE浏览器用户单击页面中的链接仍然能够跳转到相应的链接位置，只是链接位置不会应用目标伪类选择符所定义的CSS样式效果。
3．语言伪类选择符浏览器适配
语言伪类选择符的浏览器兼容性如表2-10所示。
表2-10 语言伪类选择符的浏览器兼容性
从表2-10中可以看出，IE8以下版本的IE浏览器不支持语言伪类选择符，其他的浏览器都能够很好地支持语言伪类选择符。对于追求完美的设计师来说，可能还是会担心其兼容性而不敢使用。其实也不是没有办法，可以采用上一章中所讲解的通用方法，为页面添加IE条件注释语句，判断IE浏览器版本，在IE7及其以下版本的IE浏览器中调用另一套CSS样式来实现，代码如下：
4．UI元素状态伪类选择符浏览器适配
UI元素状态伪类选择符的浏览器兼容性如表2-11所示，从中可以看出，除IE浏览器以外，其他各种主流浏览器对UI元素状态伪类选择符的支持性都非常好，IE9及其以上版本的IE浏览器也能够全面支持UI元素状态伪类选择符。
表2-11 UI元素状态伪类选择符的浏览器兼容性
考虑到国内还有很多用户使用IE9以下版本的IE浏览器，使用UI元素状态伪类选择符时想要获得更好的浏览器兼容性可以通过以下两种方法来处理。
第一种方法是使用JavaScript库，选用内置已兼容了UI元素状态伪类选择符的JavaScript库或框架，然后在代码中引入它们并完成相要的效果。
第二种方法是在不支持UI元素状态伪类选择符的IE浏览器下添加类CSS样式。例如，禁用的按钮效果，可以先在表单元素的标签中添加一个类CSS样式（如类CSS样式名称为.disabled），然后定义该类CSS样式。CSS样式设置代码如下：
5．结构伪类选择符浏览器适配
结构伪类选择符的浏览器兼容性如表2-12所示。
表2-12 结构伪类选择符的浏览器兼容性
从表2-12中可以看出，除IE浏览器以外，其他各主流浏览器对结构伪类选择符的支持性都非常好，IE9及其以上版本的IE浏览器也能够全面支持结构伪类选择符。
如果要使IE 9以下版本的IE浏览器表现出相同的效果，通常有两种方法。
第一种方法是引用JavaScript脚本文件，从而使IE 9以下版本的IE浏览器同样能够支持结构伪类选择符。这种方案的不足之处是，如果浏览器禁用脚本，则会丧失整个功能。
第二种方法是使用通用的IE条件注释语法来判断IE浏览器的版本，在IE9以下版本的IE浏览器中引用另外一套CSS样式，在这套CSS样式中使用传统的选择符来达到相同的效果，而不使用结构伪类选择符。
2.7.7 伪元素选择符
除了伪类选择符，CSS还支持访问伪元素选择符。其实伪元素选择符在CSS中一直存在，大家平时看到的有“:first-letter”“:first-line”“:before”“:after”。CSS对伪元素选择符进行了一定的调整，在以前的基础上增加了一个冒号，也就相应地变成了 “::first-letter”“::first-line”“::before”“::after”，另外伪元素选择符还增加了一个“::selection”。
1.::first-letter
::first-letter伪元素选择符用来选择文本块的第一个字母，通常用于给文本元素添加排版细节，如首字下沉效果。写法如下：
2.::first-line
::first-line伪元素选择符的使用方法和::first-letter伪元素选择符的使用方法类似，也常用于文本排版，但是::first-line伪元素选择符用来匹配元素的第一行文本，可以使第一行文字应用一些特殊的样式。例如，将段落文本的第一行显示为倾斜体的效果，CSS样式代码如下：
3.::before和::after
::before和::after伪元素选择符不是指存在于标记中的内容，而是指可以插入额外内容的位置。要通过::before和::after伪元素选择符在页面中生成内容，还需要配合content属性一起使用。
4.::selection
在浏览器默认的情况下，如果页面为浅色背景，则选中的文本内容会显示深蓝色的背景和白色的字体；如果页面为深色背景，则选中的文本会显示白色的背景和深蓝色的字体。通过使用CSS中的::selection伪元素选择符，可以改变在网页中选中的文本的突出显示效果。但是目前浏览器对::selection伪元素选择符的支持性不是很好，Webkit内核的浏览器可以支持该伪元素，在IE浏览器中只有IE 9以上版本才支持，Firefox浏览器也需要加上其私有属性-moz才支持。