第19章 选择器
本章针对CSS 3中使用的各种选择器进行详细介绍，通过选择器的使用，你不再需要在编辑样式时使用多余的以及没有任何语义的class属性，而是直接将样式与元素绑定起来，从而节省大量在网站或Web应用程序已经完成之后修改样式时所需花费的时间。
学习内容：
□掌握CSS 3中使用的选择器的基本概念。知道什么是选择器以及为什么需要使用选择器，使用选择器有什么好处。
□掌握CSS 3中的各种属性选择器的概念以及使用方法，其中包括：
● [att=val]选择器
● [att*=val]选择器
● [att^=val]选择器
● [att$=val]选择器
□掌握CSS3中的各种结构性伪类选择器的概念以及使用方法，其中包括：
● root选择器
● not选择器
● empty选择器
● target选择器
● f irst-child选择器
● last-child选择器
● nth-child选择器
● nth-last-child选择器
● nth-of-type选择器
● nth-last-of-type选择器
● only-child选择器
□掌握CSS3中的各种UI元素状态伪类选择器的概念以及使用方法，其中包括：
● E:hover选择器
● E:active选择器
● E:focus选择器
● E:enabled选择器
● E:disabled选择器
● E:read-only选择器
● E:read-write选择器
● E:checked选择器
● E:default选择器
● E:indeterminate选择器
● E::selection选择器
● E:invalid选择器
● E:valid选择器
● E:required选择器
● E:optional选择器
● E:in-range选择器
● E:out-of-range选择器
□掌握CSS3中的通用兄弟元素选择器的概念以及使用方法。
19.1 选择器概述
选择器是CSS 3中一个重要的内容。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。
在样式表中，一般会书写大量的代码，在大型网站中，样式表中的代码可能会达到几千行。麻烦的是，当整个网站或整个Web应用程序全部书写好之后，需要针对样式表进行修改时，在洋洋洒洒一大篇CSS代码之中，并没有说明什么样式服务于什么元素，只是使用了class属性，然后在页面中指定了元素的class属性。但是，使用元素的class属性有两个缺点：第一，class属性本身没有语义，它纯粹用来为CSS样式服务，属于多余属性；第二，使用class属性的话，并没有把样式与元素绑定起来，针对同一个class属性，文本框也可以使用，下拉框也可以使用，甚至按钮也可以使用，这样其实是非常混乱的，修改样式时也很不方便。
所以，在CSS 3中，提倡使用选择器来将样式与元素直接绑定起来，这样的话，在样式表中什么样式与什么元素相匹配变得一目了然，修改起来也很方便。不仅如此，通过选择器，我们还可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，最终书写出来的样式表也变得简洁明了。
具体来说，使用选择器进行样式指定时，采用类似E[foo$="val"]这种正则表达式的形式。在样式中，声明该样式应用于什么元素，该元素的某个属性的属性值必须是什么。例如，我们可以指定将页面中id为“div_Big”的div元素的背景色设定为红色，代码如下所示。
div[id="div_Big"] {background: red;}
这样，符合这个条件（id为“div_Big”）的div元素的背景色被设为红色，不符合这个条件的div元素不使用这个样式。
另外，我们还可以在指定样式时使用“^”通配符（开头字符匹配）、“？”通配符（结尾字符匹配）与“*”通配符（包含字符匹配）。如指定id末尾字母为“t”的div元素的背景色为蓝色，代码如下所示。
div[id$="t"] {background: red;}
使用通配符能大大提高样式表的书写效率。
19.2 属性选择器
19.2.1 属性选择器概述
在HTML中，通过各种各样的属性，我们可以给元素增加很多附加信息。例如，通过width属性，我们可以指定div元素的宽度，通过id属性，我们可以将不同的div元素进行区分，并且通过JavaScript来控制这个div元素的内容和状态。
接下来，我们在代码清单19-1中看一个HTML页面，该页面中包含一些div，每个div之间用id属性进行区分。
代码清单19-1 一个具有很多div元素的页面
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜/head＞
＜div id="section1"＞示例文本1＜/div＞
＜div id="subsection1-1"＞示例文本1-1＜/div＞
＜div id="subsection1-2"＞示例文本1-2＜/div＞
＜div id="section2"＞示例文本2＜/div＞
＜div id="subsection2-1"＞示例文本2-1＜/div＞
＜div id="subsection2-2"＞示例文本2-2＜/div＞
接下来，我们回顾一下CSS 2中对div元素使用样式的方法，如果要将id为“section1”的div元素的背景色设定为黄色，我们首先追加样式，如下所示。
＜style type="text/css"＞
.divYellow{background:yellow}
＜/style＞
然后指定id为“section1”的这个div元素的class属性，如下所示。
＜div id="section1" class="divYellow"＞示例文本1＜/div＞
接下来，我们看一下CSS 2中如何使用属性选择器来实现同样的处理。
使用属性选择器时，需要声明属性与属性值，声明方法如下所示。
[att=val]
其中att代表属性，val代表属性值。例如，要将id为“section1”的div元素的背景色设定为黄色，我们只要在代码清单19-1中加入如下所示的样式代码即可。
＜style type="text/css"＞
[id=section1]{
background-color: yellow;
}
＜/style＞
最后，我们在代码19-2中完整地看一下使用CSS 2的属性选择器的示例代码，在本节中接下来的部分都只会针对这个示例中的样式代码进行修改，其他部分不做修改。
代码清单19-2 使用CSS 2的属性选择器的示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜style type="text/css"＞
[id=section1]{
background-color: yellow;
}
＜/style＞
＜/head＞
＜div id="section1" class="divYellow"＞示例文本1＜/div＞
＜div id="subsection1-1"＞示例文本1-1＜/div＞
＜div id="subsection1-2"＞示例文本1-2＜/div＞
＜div id="section2"＞示例文本2＜/div＞
＜div id="subsection2-1"＞示例文本2-1＜/div＞
＜div id="subsection2-2"＞示例文本2-2＜/div＞
追加了这个属性选择器后的运行结果如图19-1所示。
19.2.2 CSS 3 中的属性选择器
在CSS3中，追加了三个属性选择器分别为：[att*=val]、[att^=val]和[att$=val]，使得属性选择器有了通配符的概念。
1. [att*=val] 属性选择器
[att*=val]属性选择器的含义是：如果元素用att表示的属性的属性值中包含用val指定的字符，则该元素使用这个样式。针对上面所述“[id=section1]”属性选择器可以修改成“[id*=section1]”，其中“id”相当于[att*=val]属性选择器中的“att”，“section1”相当于[att*=val]属性选择器中的“val”。
在代码清单19-1所述示例的样式代码中，如果使用如下代码中所示的[att*=val]属性选择器，则页面中id为“section1”、“subsection1-1”、“subsection1-2”的div元素的背景色都变为黄色，因为这些元素的id属性中都包含“section1”字符。
[id＊=section1]{
background-color: yellow;
}
代码19-1所述示例的样式代码中使用[att*=val]属性选择器后的运行结果如图19-2所示。
图19-1 使用CSS 2的属性选择器的示例
图19-2 使用[att*=val]属性选择器的示例
2. [att^=val] 属性选择器
[att^=val]属性选择器的含义是：如果元素用att表示的属性的属性值的开头字符为用val指定的字符话，则该元素使用这个样式。针对上面所述“[id=section1]”属性选择器可以修改成“[id^=section1]”。
在代码19-1所述示例的样式代码中，如果将使用的[att=val]属性选择器改为使用如下所示的[att^=val]属性选择器，并且将val指定为“section”，则页面中id为“section1”、“section2”的div元素的背景色都变为黄色，因为这些元素的id属性的开头字符都为“section”字符。
[id^=section]{
background-color: yellow;
}
代码19-1所述示例的样式代码中使用[att^=val]属性选择器后的运行结果如图19-3所示。
图19-3 使用[att^=val]属性选择器的示例
3. [att$=val] 属性选择器
[att$=val]属性选择器的含义是：如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，则该元素使用这个样式。针对上面所述“[id=section1]”属性选择器可以修改成“[id$=section1]”。
在代码19-1所述示例的样式代码中，如果采用如下所示的[att$=val]属性选择器，并且将val指定为“-1”，则页面中id为“subsection1-1”、“subsection2-1”的div元素的背景色都变为黄色，因为这些元素的id属性的结尾字符都为“-1”字符。另外请注意该属性选择器中在指定匹配字符前必须加上“\”这个escape字符。
[id$=\-1]{
background-color: yellow;
}
代码19-1所述示例的样式代码中使用[att$=val]属性选择器后的运行结果如图19-4所示。
图19-4 使用[att$=val]属性选择器的示例
19.2.3 灵活运用属性选择器
如果能够灵活运用属性选择器，目前为止需要依靠id或class名才能实现的样式完全可以使用属性选择器来实现。
例如，利用[att$=val]属性选择器，可以根据超链接中不同的文件扩展符使用不同的样式。在代码清单19-3所示示例中，在超链接地址的末尾为“/”、“htm”、“html”时显示“Web网页”文字，在超链接地址的末尾为“jpg”、“jpeg”时显示“JPEG图像文件”文字。
代码清单19-3 灵活运用属性选择器示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜style type="text/css"＞
a[href$=\/]:after, a[href$=htm]:after, a[href$=html]:after{
content:"Web网页";
color: red;
}
a[href$=jpg]:after{
content:"JPEG图像文件";
color: green;
}
＜/style＞
＜/head＞
＜ul＞
＜li＞＜a href="http://Lulingniu/"＞HTML 5+CSS3权威指南＜/a＞＜/li＞
＜li＞＜a href="http://Lulingniu/CSS3.htm"＞CSS3的新特性＜/a＞＜/li＞
＜li＞＜a href="photo.jpg"＞图像素材＜/a＞＜/li＞
＜/ul＞
这段代码的运行结果如图19-5所示。
图19-5 灵活运用属性选择器示例
另外，如果使用IE浏览器来运行本示例，因为在IE 8之前尚未支持after伪元素选择器，所以该示例只能在IE 8之后的浏览器中正确显示，在接下来的“伪元素选择器概述”一节中将针对after伪元素选择器做详细说明。
19.3 结构性伪类选择器
本节介绍CSS 3中的结构性伪类选择器，在介绍结构性伪类选择器之前，先来介绍一下CSS中的伪类选择器及伪元素。
19.3.1 CSS中的伪类选择器及伪元素
1. 伪类选择器概述
我们知道，在CSS中，可以使用类选择器把相同的元素定义成不同的样式，如针对一个p元素，我们可以做如下所示定义。
p.right{text-align:right}
p.center{text-align:right}
然后在页面上对p元素使用class属性，把定义好的样式指定给具体的p元素，代码如下所示。
＜p class="right"＞测试文字＜/p＞
＜p class="center"＞测试文字＜/p＞
在CSS中，除了上面所述的类选择器之外，还有一种伪类选择器，这种伪类选择器与类选择器的区别是，类选择器可以随便起名，如上面的“p.right”与“p.center”，你也可以命名为“p.class1”与“p.class2”，然后在页面上使用“class='class1'”与“class='class2'”，但是伪类选择器是CSS中已经定义好的选择器，不能随便起名。在CSS中我们最常用的伪类选择器是使用在a（锚）元素上的几种选择器，它们的使用方法如下所示。
a:link {color:#FF0000;text-decoration:none}
a:visited {color:#00FF00;text-decoration:none}
a:hover {color:#FF00FF;text-decoration:underline}
a:active {color:#0000FF;text-decoration:underline}
2. 伪元素选择器概述
伪元素选择器是指并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，它的使用方法如下所示。
选择器：伪元素{属性：值}
伪元素选择器也可以与类配合使用，使用方法如下所示。
选择器.类名：伪元素{属性：值}
在CSS中，主要有如下四个伪元素选择器。
（1）f irst-line伪元素选择器
f irst-line伪元素选择器用于向某个元素中的第一行文字使用样式。
代码清单19-4是它的一个使用示例，在该示例中，有一个p元素，在该元素内存在两行文字，使用f irst-line伪元素选择器将第一行文字设为蓝色。
代码清单19-4 first-line伪元素使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞f irst-line伪元素使用示例＜/title＞
＜style type="text/css"＞
p:f irst-line{color:#0000FF}
＜/style＞
＜/head＞
＜body＞
＜p＞段落中的第一行。＜br＞段落中的第二行＜/p＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-6所示。
图19-6 first-line伪元素使用示例
（2）f irst-letter伪元素选择器
f irst-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或日文等汉字）使用样式。
代码清单19-5是f irst-letter伪元素选择器的一个使用示例，在该示例中，有两段文字—一段是英文，另一段是中文，使用f irst-letter伪元素选择器来设置这两段文字的开头字母或文字的文字颜色为蓝色。
代码清单19-5 first-letter伪元素选择器
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞f irst-letter伪元素使用示例＜/title＞
＜style type="text/css"＞
p:f irst-letter{color:#0000FF}
＜/style＞
＜/head＞
＜body＞
＜p＞This is an english text。＜/p＞
＜p＞这是一段中文文字。＜/p＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-7所示。
图19-7 first-letter伪元素使用示例
（3）before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容，使用方法如下所示。
// 可以插入一段文字
＜元素〉：before
{
content：插入文字
}
// 也可以插入其他内容
＜元素〉：before
{
content：url(test.wav)
}
代码清单19-6是before伪元素选择器的一个使用示例，在该示例中有一个ul列表，该列表中有几个li列表项目，使用before伪元素选择器在每个列表项目的文字的开头插入“·”字符。
代码清单19-6 before伪元素选择器的使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞before伪元素选择器使用示例＜/title＞
＜style type="text/css"＞
li:before{content: ·}
＜/style＞
＜/head＞
＜body＞
＜ul＞
＜li＞列表项目1＜/li＞
＜li＞列表项目2＜/li＞
＜li＞列表项目3＜/li＞
＜li＞列表项目4＜/li＞
＜li＞列表项目5＜/li＞
＜/li＞
＜/ul＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-8所示。
图19-8 before伪元素使用示例
（4）after伪元素选择器
after伪元素选择器用于在某个元素之后插入一些内容，使用方法如下所示。
＜元素＞：after
{
content：插入文字
}
// 也可以插入其他内容
＜元素＞：after
{
content：url(test.wav)
}
代码清单19-7是after伪元素选择器的一个使用示例，在该示例中有一个ul列表，这个ul列表的内容为某个网站上播放电影的节目清单。该列表中有几个列表项目，每个列表项目中存放了对于某部电影的超链接，使用after伪元素选择器在每个超链接的后面加入“（仅用于测试，请勿用于商业用途。）”的文字，并且将文字颜色设为红色。
代码清单19-7 after伪元素选择器的使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞after伪元素选择器使用示例＜/title＞
＜style type="text/css"＞
li:after{
content: "(仅用于测试，请勿用于商业用途。)";
font-size:12px;
color:red;
}
＜/style＞
＜/head＞
＜body＞
＜h1＞电影清单＜/h1＞
＜ul＞
＜li＞＜a href="movie1.mp4"＞狄仁杰之通天帝国＜/a＞＜/li＞
＜li＞＜a href="movie2.mp4"＞精武风云＜/a＞＜/li＞
＜li＞＜a href="movie3.mp4"＞大笑江湖＜/a＞＜/li＞
＜/ul＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-9所示。
图19-9 after伪元素选择器使用示例
19.3.2 选择器root、not、empty和target
在介绍完了CSS中的伪类选择器与伪元素选择器之后，让我们来看一下CSS 3中的结构性伪类选择器。结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式。
首先，我们来看4个最基本的结构性伪类选择器——root选择器、not选择器、empty选择器与target选择器。
1. root选择器
root选择器将样式绑定到页面的根元素中。根元素是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的“＜html＞”部分。
代码清单19-8为一个HTML页面，在该页面中，有一段文章，并且有一个文章的标题。
代码清单19-8 root选择器示例的HTML界面
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type"content="text/html;charset=gb2312" /＞
＜title＞root选择器＜/title＞
＜/head＞
＜body＞
＜h1＞选择器概述＜/h1＞
＜p＞
选择器是CSS3中一个重要的内容。首先需要说明的是，使用选择
器的目的是为了提高开发人员书写或修改样式表时的工作效率，因为在样式表中，一般会书写大量
的代码，在大型网站中，样式表中的代码可能会达到几千行。
＜/p＞
＜/body＞
＜/html＞
针对这个网页，使用如下所示的root选择器来指定整个网页的背景色为黄色，将网页中body元素的背景色设为绿色。
＜style type="text/css"＞
:root{
background-color: yellow;
}
body{
background-color: limegreen;
}
＜/style＞
使用了root选择器后的运行结果如图19-10所示。
图19-10 root选择器使用示例
另外，在使用样式指定root元素与body元素的背景时，根据不同的指定条件背景色的显示范围会有所变化，这一点请注意。如同样是上面这个示例，如果采取如下所示的样式，不使用root选择器来指定root元素的背景色，只指定body元素的背景色，则整个页面就全部变成绿色的了。
＜style type="text/css"＞
body{
background-color: limegreen;
}
＜/style＞
删除root选择器后的页面如图19-11所示。
图19-11 删除root选择器后的显示效果
2. not选择器
如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。
譬如针对代码清单19-8所示的HTML页面，我们可以使用“body *”语句来指定body元素的背景色为黄色，但是使用“:not(h1)”语句中使用的not选择器排除h1元素，代码如下所示。
＜style type="text/css"＞
body ＊:not(h1){
background-color: yellow;
}
＜/style＞
使用not选择器后的运行结果如图19-12所示。
图19-12 使用not选择器示例
3. empty选择器
使用empty选择器来指定当元素中内容为空白时使用的样式。例如，在代码清单13-9所示的HTML页面中，有一个表格。可以使用empty选择器来指定当表格中某个单元格内容为空白时，该单元格背景为黄色。
代码清单19-9 empty选择器使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞empty选择器＜/title＞
＜style type="text/css"＞
:empty{
background-color: yellow;
}
＜/style＞
＜/head＞
＜body＞
＜table border="1" cellpading="0" cellspacing="0"＞
＜tr＞＜td＞A＜/td＞＜td＞B＜/td＞＜td＞C＜/td＞＜/tr＞
＜tr＞＜td＞D＜/td＞＜td＞E＜/td＞＜td＞＜/td＞＜/tr＞
＜/table＞
＜/body＞
＜/html＞
使用empty选择器后的运行结果如图19-13所示。
图19-13 使用empty选择器示例
4. target选择器
使用target选择器来对页面中某个target元素（该元素的id被当作页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
接下来我们来看一个target选择器的使用示例。页面中包含几个div元素，每个div元素都存在一个书签，当用户点击了页面中的超链接跳转到该div元素时，该div元素使用target选择器中指定的样式，在target选择器中，指定该div元素的背景色变为黄色。其中指定target选择器时的代码如下所示。
target{
background-color: yellow;
}
该示例的详细代码如代码清单19-10所示。
代码清单19-10 target选择器使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞target选择器＜/title＞
＜style type="text/css"＞
:target{
background-color: yellow;
}
＜/style＞
＜/head＞
＜body＞
＜p id="menu"＞
＜a href="#text1"＞示例文字1＜/a＞ |
＜a href="#text2"＞示例文字2＜/a＞ |
＜a href="#text3"＞示例文字3＜/a＞ |
＜a href="#text4"＞示例文字4＜/a＞ |
＜a href="#text5"＞示例文字5＜/a＞
＜/p＞
＜div id="text1"＞
＜h2＞示例文字1＜/h2＞
＜p＞...此处略去＜/p＞
＜/div＞
＜div id="text2"＞
＜h2＞示例文字2＜/h2＞
＜p＞...此处略去＜/p＞
＜/div＞
＜div id="text3"＞
＜h2＞示例文字3＜/h2＞
＜p＞...此处略去＜/p＞
＜/div＞
＜div id="text4"＞
＜h2＞示例文字4＜/h2＞
＜p＞...此处略去＜/p＞
＜/div＞
＜div id="text5"＞
＜h2＞示例文字5＜/h2＞
＜p＞...此处略去＜/p＞
＜/body＞
＜/html＞
使用target选择器后的运行结果如图19-14所示。
图19-14 使用target选择器示例
19.3.3 选择器first-child、last-child、nth-child和nth-last-child
本节介绍f irst-child选择器、last-child选择器、nth-child选择器与nth-last-child选择器。利用这几个选择器，能够特别针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素，甚至第偶数个或第奇数个子元素进行样式的指定。
1. 单独指定第一个子元素、最后一个子元素的样式
接下来，让我们看一个示例。该示例对ul列表中的li列表项目进行样式的指定，在样式中对第一个列表项目与最后一个列表项目分别指定不同的背景色。
如果要对第一个列表项目与最后一个列表项目分别指定不同的背景色，目前为止采取的做法都是：分别给这两个列表项目加上class属性，然后对这两个class使用不同的样式，在两个样式中分别指定不同的背景色。但是，如果使用f irst-child选择器与last-child选择器，这个多余的class属性就不需要了。
接下来，我们在代码清单19-11中看一下如何使用f irst-child选择器与last-child选择器将第一个列表项目的背景色指定为黄色，将最后一个列表项目的背景色设定为浅蓝色。
代码清单19-11 first-child选择器与last-child选择器使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞f irst-child选择器与last-child选择器使用示例＜/title＞
＜style type="text/css"＞
li:f irst-child{
background-color: yellow;
}
li:last-child{
background-color: skyblue;
}
＜/style＞
＜/head＞
＜body＞
＜h2＞列表A＜/h2＞
＜ul＞
＜li＞列表项目1＜/li＞
＜li＞列表项目2＜/li＞
＜li＞列表项目3＜/li＞
＜li＞列表项目4＜/li＞
＜li＞列表项目5＜/li＞
＜/ul＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-15所示。
图19-15 first-child选择器与last-child选择器使用示例
另外，如果页面中具有多个ul列表，则该f irst-child选择器与last-child选择器对所有ul列表都适用，如代码清单19-12所示。
代码清单19-12 具有多个列表时first-child选择器与last-child选择器使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞f irst-child选择器与last-child选择器使用示例＜/title＞
＜style type="text/css"＞
li:f irst-child{
background-color: yellow;
}
li:last-child{
background-color: skyblue;
}
＜/style＞
＜/head＞
＜body＞
＜h2＞列表A＜/h2＞
＜ul＞
＜li＞列表项目1＜/li＞
＜li＞列表项目2＜/li＞
＜li＞列表项目3＜/li＞
＜li＞列表项目4＜/li＞
＜li＞列表项目5＜/li＞
＜/ul＞
＜h2＞列表B＜/h2＞
＜ul＞
＜li＞列表项目1＜/li＞
＜li＞列表项目2＜/li＞
＜li＞列表项目3＜/li＞
＜li＞列表项目4＜/li＞
＜li＞列表项目5＜/li＞
＜/ul＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-16所示。
图19-16 具有多个列表时first-child选择器与last-child选择器使用示例
另外，first-child选择器在CSS 2中就已存在，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，从IE7开始被IE浏览器所支持。
Last-child选择器从CSS 3开始被提供，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，到IE 8为止还没有获得IE浏览器的支持。
2. 对指定序号的子元素使用样式
如果使用nth-child选择器与nth-last-child选择器，不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式，还可以针对父元素中某个指定序号的子元素来指定样式。这两个选择器是first-child及last-child的扩展选择器。这两个选择器的样式指定方法如下所示。
nth-child(n){
// 指定样式
}
＜子元素＞：nth-last-child(n){
// 指定样式
}
将指定序号书写在“nth-child”或“nth-last-child”后面的括号中，如“nth-child(3)”表示第三个子元素，“nth-last-child(3)”表示倒数第三个子元素。
在代码清单19-13中，我们给出一个使用这两个选择器的示例，在该示例中，指定ul列表中第二个li列表项目的背景色为黄色，倒数第二个列表项目的背景色为浅蓝色。
代码清单19-13 nth-child选择器与nth-last-child选择器使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞nth-child选择器与nth-last-child选择器使用示例＜/title＞
＜style type="text/css"＞
li:nth-child(2){
background-color: yellow;
}
li:nth-last-child(2){
background-color: skyblue;
}
＜/style＞
＜/head＞
＜body＞
＜h2＞列表A＜/h2＞
＜ul＞
＜li＞列表项目1＜/li＞
＜li＞列表项目2＜/li＞
＜li＞列表项目3＜/li＞
＜li＞列表项目4＜/li＞
＜li＞列表项目5＜/li＞
＜/ul＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-17所示。
图19-17 nth-child选择器与nth-last-child选择器使用示例
另外，这两个选择器都是从CSS 3开始被提供，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，到IE 8为止还没有受到IE浏览器的支持。
3. 对所有第奇数个子元素或第偶数个子元素使用样式
除了对指定序号的子元素使用样式以外，nth-child选择器与nth-last-child选择器还可以用来对某个父元素中所有第奇数个子元素或第偶数个子元素使用样式。使用方法如下所示。
nth-child(odd){
// 指定样式
}
// 所有正数下来的第偶数个子元素
＜子元素＞:nth-child(even){
// 指定样式
}
// 所有倒数上去的第奇数个子元素
＜子元素＞:nth-last-child(odd){
// 指定样式
}
// 所有倒数上去的第偶数个子元素
＜子元素＞:nth-last-child(even){
// 指定样式
}
接下来，我们在代码清单19-14中看一个使用nth-child选择器来分别针对ul列表的第奇数个列表项目与第偶数个列表项目指定不同背景色的示例。在该示例中将所有第奇数个列表项目的背景色设为黄色，将所有第偶数个列表项目的背景色设为浅蓝色。
代码清单19-14 使用nth-child对第奇数个、第偶数个子元素使用不同样式示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞使用nth-child对第奇数个、第偶数个子元素使用不同样式示例＜/title＞
＜style type="text/css"＞
li:nth-child(odd){
background-color: yellow;
}
li:nth-child(even){
background-color: skyblue;
}
＜/style＞
＜/head＞
＜body＞
＜h2＞列表A＜/h2＞
＜ul＞
＜li＞列表项目1＜/li＞
＜li＞列表项目2＜/li＞
＜li＞列表项目3＜/li＞
＜li＞列表项目4＜/li＞
＜li＞列表项目5＜/li＞
＜/ul＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-18所示。
图19-18 使用nth-child对第奇数个、第偶数个子元素使用不同样式示例
另外，使用nth-child选择器与nth-last-child选择器时，虽然在对列表项目使用时没有问题，但是当用于其他元素时，还是会出现问题，在19.3.4节中，我们将阐述会产生哪些问题，以及怎么解决这些问题。
19.3.4 选择器nth-of-type和nth-last-of-type
1. 使用选择器nth-child和nth-last-child时会产生的问题
之前，我们介绍过将nth-child选择器与nth-last-child选择器用于某些元素时，会产生一些问题，这里我们首先来看一下究竟会产生什么问题。
在代码清单19-15中，我们给出一个HTML页面代码，在该页面中，存在一个div元素，在该div元素中，又给出几篇文章的标题与每篇文章的正文。
代码清单19-15 nth-of-type选择器与nth-last-of-type选择器使用示例的HTML页面
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞nth-of-type选择器与nth-last-of-type选择器使用示例＜/title＞
＜/head＞
＜body＞
＜div＞
＜h2＞文章标题A＜/h2＞
＜p＞文章正文。＜/p＞
＜h2＞文章标题B＜/h2＞
＜p＞文章正文。＜/p＞
＜h2＞文章标题C＜/h2＞
＜p＞文章正文。＜/p＞
＜h2＞文章标题D＜/h2＞
＜p＞文章正文。＜/p＞
＜/div＞
＜/body＞
＜/html＞
为了让第奇数篇文章的标题与第偶数篇文章的标题的背景色不一样，我们首先使用nth-child选择器来进行指定，指定第奇数篇文章的标题背景色为黄色，第偶数篇文章的标题背景色为浅蓝色，书写方法如下所示。
＜style type="text/css"＞
h2:nth-child(odd){
background-color: yellow;
}
h2:nth-child(even){
background-color: skyblue;
}
＜/style＞
将上面这段指定样式的代码添加到如代码清单19-15所示的HTML页面中，然后在浏览器中查看该页面的运行结果，如图19-19所示。
图19-19 在代码清单19-15所示的HTML页面中使用nth-child选择器
运行结果并没有如预期的那样，让第奇数篇文章的标题背景色为黄色，第偶数篇文章的标题背景色为浅蓝色，而是所有文章的标题都变成了黄色。
这个问题的产生原因在于：nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素时，是连同父元素中的所有子元素一起计算的。
换句话说，“h2:nth-child(odd)”这行代码的含义，并不是指“针对div元素中第奇数个h2子元素来使用”，而是指“当div元素中的第奇数个子元素如果是h2子元素时使用”。
所以在上面这个示例中，因为h2元素与p元素相互交错，所有h2元素都处于奇数位置，所以所有h2元素的背景色都变成了黄色，而处于偶数位置的p元素，因为没有指定第偶数个位置的子元素的背景色，所以没有发生变化。
当父元素是列表时，因为列表中只可能有列表项目一种子元素，所以不会有问题，而当父元素是div时，因为div元素中包含多种子元素，所以出现了问题。
2. 使用选择器nth-of-type和nth-last-of-type
在CSS 3中，使用nth-of-type选择器与nth-last-of-type选择器来避免这类问题的发生。使用这两个选择器时，CSS 3在计算子元素是第奇数个子元素还是第偶数个子元素时，就只针对同类型的子元素进行计算了。这两个选择器的使用方法如下所示。
＜style type="text/css"＞
h2:nth-of-type(odd){
background-color: yellow;
}
h2:nth-of-type(even){
background-color: skyblue;
}
＜/style＞
把以上这段代码添加到代码清单19-15所示页面中，然后运行该页面，运行结果如图19-20所示。
图19-20 nth-of-type选择器使用示例
另外，如果计算奇数还是偶数时需要从下往上倒过来计算，可以使用nth-last-of-type选择器来代替nth-last-child选择器，进行倒序计算。
nth-of-type选择器与nth-last-of-type选择器都是从CSS 3开始被提供，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，到IE 8为止，还没有获得IE浏览器的支持。
19.3.5 循环使用样式
通过前几节的介绍，我们已经知道，使用nth-child选择器、nth-last-child选择器、nth-of-type选择器与nth-last-of-type选择器，我们可以对父元素中指定序号的子元素、第奇数个子元素、第偶数个子元素来单独进行样式的指定，这里我们再通过代码清单19-16所示示例，复习一下nth-child选择器的用法。在该示例中，有一个ul列表，通过nth-child选择器来指定该列表中第一个列表项目、第二个列表项目、第三个列表项目及第四个列表项目的背景色。
代码清单19-16 使用nth-child选择器指定项目背景色
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞使用nth-child选择器指定项目背景色＜/title＞
＜style type="text/css"＞
li:nth-child(1) {
background-color: yellow;
}
li:nth-child(2) {
background-color: limegreen;
}
li:nth-child(3) {
background-color: red;
}
li:nth-child(4) {
background-color: white;
}
＜/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＞
＜/ul＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-21所示。
图19-21 使用nth-child选择器指定项目背景色
在图中，我们可以看见该列表中前四个列表项目的背景色已设定好，其他列表项目的背景色均未设定。现在，要讨论一个问题，如果开发者想对所有的列表项目都设定背景色，但是不采用这种一个个列表项目分别指定的方式（如果有100个列表项目的话，工作量就太大了），而是采用循环指定的方式，让剩下来的列表项目循环采用一开始已经指定好的背景色，应该怎么处理呢？
这时，仍然可以采用nth-child选择器，只需在“nth-child（n）”语句处，把参数n改成可循环的an+b的形式就可以了。a表示每次循环中共包括几种样式，b表示指定的样式在循环中所处位置。如此处是4种背景色作为一组循环，则将代码清单19-16中样式指定的代码修改成如下所示的指定方法。
＜style type="text/css"＞
li:nth-child(4n+1) {
background-color: yellow;
}
li:nth-child(4n+2) {
background-color: limegreen;
}
li:nth-child(4n+3) {
background-color: red;
}
li:nth-child(4n+4) {
background-color: white;
}
＜/style＞
用这段代码替代代码清单19-16中样式指定的代码，然后运行代码清单19-16，运行结果如图19-22所示。
图19-22 循环使用样式示例
在运行结果中，我们可以清楚地看到，所有列表项目均循环使用了开头四个列表项目中的背景色。
另外，“4n+4”的写法可略写成“4n”的形式。
因此，前面我们所说的nth-child(odd)选择器和nth-child(even)选择器实际上都可以采用如下形式进行代替。
// 所有正数下来的第奇数个子元素
＜子元素＞:nth-child(2n+1){
// 指定样式
}
// 所有正数下来的第偶数个子元素
＜子元素＞:nth-child(2n+2){
// 指定样式
}
// 所有倒数上去的第奇数个子元素
＜子元素＞:nth-last-child(2n+1){
// 指定样式
}
// 所有倒数上去的第偶数个子元素
＜子元素＞:nth-last-child(2n+2){
// 指定样式
}
19.3.6 only-child选择器
采用如下所示的方法并结合运用nth-child选择器与nth-last-child选择器，则可指定当某个父元素中只有一个子元素时才使用的样式。
＜子元素＞:nth-child(1)：nth-last-child(1){
// 指定样式
}
接下来，我们看一个示例，该示例中有两个ul列表，一个ul列表里有几个列表项目，另一个ul列表里只有一个列表项目。在样式中指定li列表的背景色为黄色，但是由于采用了结合运用nth-child选择器与nth-last-child选择器并且将序号都设定为1的处理，所以显示出来的页面中只有拥有唯一列表项目的那个ul列表中的列表项目背景色变为黄色。代码如代码清单19-17所示。
代码清单19-17 只对唯一列表项目使用样式示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞只对唯一列表项目使用样式示例＜/title＞
＜style type="text/css"＞
li:nth-child(1):nth-last-child(1){
background-color: yellow;
}
＜/style＞
＜/head＞
＜body＞
＜h2＞ul列表A＜/h2＞
＜ul＞
＜li＞列表项目A01＜/li＞
＜/ul＞
＜h2＞ul列表B＜/h2＞
＜ul＞
＜li＞列表项目B01＜/li＞
＜li＞列表项目B02＜/li＞
＜li＞列表项目B03＜/li＞
＜/ul＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-23所示。
图19-23 只对唯一列表项目使用样式示例
另外，可以使用only-child选择器来代替使用“nth-child(1)：nth-last-child(1)”的实现方法。如在上面这个示例中，可以将样式指定中的代码改成如下所示的指定方法。
＜style type="text/css"＞
li:only-child{
background-color: yellow;
}
＜/style＞
读者可自行将上面示例中的样式指定代码用这段代码进行替代，然后在浏览器中重新查看运行结果。另外，也可使用only-of-type选择器来替代“nth-of-type(1):nth-last-of-type(1)”，通过结合使用nth-of-type选择器与nth-last-of-type选择器来让样式只对唯一子元素起作用。nth-of-type选择器与nth-last-of-type选择器的作用与使用方法在前文已经介绍，此处不再赘述。
19.4 UI元素状态伪类选择器
在CSS 3的选择器中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器。
这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。
在CSS 3中，共有17种UI元素状态伪类选择器，分别是E:hover、E:active、E:focus、E:enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E: indeterminate、E::selection、E:invalid、E:valid、E:required、E:optional、E:in-range，以及out-of-range。
到目前为止，这17种选择器被浏览器的支持情况如表19-1所示。
表19-1 各UI元素状态伪类选择器受浏览器的支持情况
19.4.1 伪类选择器E:hover、E:active和E:focus
E:hover伪类选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式，使用方法如下所示：
＜元素＞:hover{
// 指定样式
}
可以在“＜元素＞”中添加元素的type属性，使用方法类似如下：
input[type="text"]: hover{
// 指定的样式
}
另外，所有UI元素状态伪类选择器的使用方法均与此类似，故后面不再赘述。
□ E:active伪类选择器被用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式。
□ E:focus伪类选择器被用来指定元素获得光标焦点时使用的样式，主要在文本框控件获得焦点并进行文字输入时使用。
代码清单19-18是使用了这3个选择器的综合示例，该示例中有两个文本框控件，使用这3个伪类选择器来指定当鼠标指针移动到文本框控件上时、文本框控件被激活时，以及光标焦点落在文本框之内时的样式。
代码清单19-18 伪类选择器E:hover、E:active和E:focus的使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞
＜title＞E:hover选择器、E:active选择器与E:focus选择器使用示例＜/title＞
＜/head＞
＜style type="text/css"＞
input[type="text"]:hover{
background-color: greenyellow;
}
input[type="text"]:focus{
background-color: skyblue;
}
input[type="text"]:active{
background-color: yellow;
}
＜/style＞
＜body＞
＜form＞
＜p＞姓名：＜input type="text" name="name" /＞＜/p＞
＜p＞地址：＜input type="text" name="address" /＞＜/p＞
＜/form＞
＜/body＞
＜/html＞
对于示例中的任意一个文本框控件来说，这段代码的运行结果都可能有如下4种情况：
1）没有对文本框控件进行任何操作时的页面显示如图19-24所示（文本框背景色为白色）。
图19-24 代码清单19-18的运行结果（没有对文本框控件进行任何操作时）
2）鼠标指针移动到某一个文本框控件上时的页面显示如图19-25所示（文本框背景色为绿色）。
图19-25 代码清单19-18的运行结果（鼠标指针移动到姓名文本框控件上时）
3）文本框控件被激活时的页面显示如图19-26所示（文本框背景色为黄色）。
图19-26 代码清单19-18的运行结果（姓名文本框控件被激活时）
4）文本框控件获得光标焦点后的页面显示如图19-27所示（文本框背景色为浅蓝色）。
图19-27 代码清单19-18的运行结果（姓名文本框控件获得光标焦点时）
19.4.2 伪类选择器E:enabled与E:disabled
□ E:enabled伪类选择器用来指定当元素处于可用状态时的样式。
□ E:disabled伪类选择器用来指定当元素处于不可用状态时的样式。
当一个表单中的元素经常在可用状态与不可用状态之间进行切换时，通常会将E:disabled伪类选择器与E:enabled伪类选择器结合使用，用E:disabled伪类选择器来设置该元素处于不可用状态时的样式，用E: enabled伪类选择器来设置该元素处于可用状态时的样式。
代码清单19-19中给出了一个将E:disabled伪类选择器与E:enabled伪类选择器结合使用的示例，在该示例中有两个radio单选框与一个文本框，在JavaScript脚本中编写代码，当用户选中其中一个radio单选框时，文本框变为可用状态，选中另一个radio单选框时，文本框变为不可用状态。通过结合使用E: disabled伪类选择器与E:enabled伪类选择器，让文本框处于不同的状态时分别使用不同的样式。
代码清单19-19 E:disabled伪类选择器与E:enabled伪类选择器结合使用的示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞E: disabled伪类选择器与E:enabled伪类选择器结合使用示例＜/title＞
＜script＞
function radio_onchange()
{
var radio=document.getElementById("radio1");
var text=document.getElementById("text1");
if(radio.checked)
text.disabled="";
else
{
text.value="";
text.disabled="disabled";
}
}
＜/script＞
＜style＞
input[type="text"]:enabled{
background-color:yellow;
}
input[type="text"]:disabled{
background-color:purple;
}
＜/style＞
＜/head＞
＜body＞
＜form＞
＜input type="radio" id="radio1" name="radio"
onchange="radio_onchange();"＞可用＜/radio＞
＜input type="radio" id="radio2" name="radio"
onchange="radio_onchange();"＞不可用＜/radio＞＜br/＞
＜input type=text id="text1" disabled /＞
＜/form＞
＜/body＞
＜/html＞
这段代码的运行结果可分为如下两种情况：
□文本框处于可用状态时的页面显示如图19-28所示（背景色为黄色）。
图19-28 代码清单19-19的运行结果（文本框处于可用状态时）
□文本框处于不可用状态时的页面显示如图19-29所示。
图19-29 代码清单19-19的运行结果（文本框处于不可用状态时）
19.4.3 伪类选择器E:read-only与E:read-write
□ E:read-only伪类选择器用来指定当元素处于只读状态时的样式。
□ E:read-write伪类选择器用来指定当元素处于非只读状态时的样式。
在Firefox浏览器中，需要写成“-moz-read-only”或“-moz-read-write”的形式。
代码清单19-20为E:read-only选择器与E:read-write选择器结合使用的一个示例，在该示例中有一个姓名文本框控件和一个地址文本框控件。其中姓名文本框控件不是只读控件，使用E:read-write选择器定义样式；地址文本框控件是只读控件，使用E:read-only选择器定义样式。
代码清单19-20 E:read-only伪类选择器与E:read-write伪类选择器结合使用的示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞ E: read-only伪类选择器与E:read-write伪类选择器结合使用示例
＜/title＞
＜style type="text/css"＞
input[type="text"]:read-only{
background-color: gray;
}
input[type="text"]:read-write{
background-color: greenyellow;
}
input[type="text"]:-moz-read-only{
background-color: gray;
}
input[type="text"]:-moz-read-write{
background-color: greenyellow;
}
＜/style＞
＜/head＞
＜body＞
＜form＞
＜p＞名前：＜input type="text" name="name" /＞
＜p＞地址：＜input type="text" name="address" value="江苏省常州市"
readonly="readonly" /＞
＜/p＞
＜/form＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-30所示。
图19-30 E: read-only伪类选择器与E:read-write伪类选择器结合使用的示例
19.4.4 伪类选择器E:checked、E:default和E:indeterminate
E:checked伪类选择器用来指定当表单中的radio单选框或checkbox复选框处于选取状态时的样式。
代码清单19-21为一个E:checked伪类选择器的使用示例，在该示例中使用了几个checkbox复选框，复选框在非选取状态时边框默认为黑色，当复选框处于选取状态时通过E:checked伪类选择器让选取框的边框变为蓝色。
代码清单19-21 E:checked伪类选择器的使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞E:checked伪类选择器使用示例＜/title＞
＜style type="text/css"＞
input[type="checkbox"]:checked {
outline:2px solid blue;
}
＜/style＞
＜/head＞
＜body＞
＜form＞
兴趣:＜input type="checkbox"＞阅读＜/input＞
＜input type="checkbox"＞旅游＜/input＞
＜input type="checkbox"＞看电影＜/input＞
＜input type="checkbox"＞上网＜/input＞
＜/form＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-31所示。
图19-31 E:checked伪类选择器使用示例
E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框控件的样式。需要注意的是，即使用户将该单选框或复选框控件的选取状态设定为非选取状态， E:default选择器中指定的样式仍然有效。
代码清单19-22为一个E:default选择器的使用示例，该示例中有几个复选框，第一个复选框被设定为默认打开时为选取状态，使用E:default选择器设定该复选框的边框为蓝色。
代码清单19-22 E:default选择器的使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞E:default选择器的使用示例＜/title＞
＜style type="text/css"＞
input[type="checkbox"]:default {
outline:2px solid blue;
}
＜/style＞
＜/head＞
＜body＞
＜form＞
兴趣:＜input type="checkbox" checked＞阅读＜/input＞
＜input type="checkbox"＞旅游＜/input＞
＜input type="checkbox"＞看电影＜/input＞
＜input type="checkbox"＞上网＜/input＞
＜/form＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-32所示。
图19-32 E:default选择器的使用示例
需要注意的是，即使用户将默认设定为选取状态的单选框或复选框修改为非选取状态，使用default选择器设定的样式依然有效，如图19-33所示。
图19-33 复选框被修改为非选取状态后使用default选择器设定的样式依然有效
E:indeterminate伪类选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选取状态时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定。到目前为止，只有Opera浏览器对这个选择器提供支持。
代码清单19-23为一个E:indeterminate选择器的使用示例，该示例中有一组单选框，其中任何一个单选框都没有被设定为默认选取状态，使用E:indeterminate选择器来设定页面打开时该组单选框的边框为蓝色。
代码清单19-23 E:indeterminate选择器的使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞ E:indeterminate选择器的使用示例＜/title＞
＜style type="text/css"＞
input[type="radio"]:indeterminate{
outline: solid 3px blue;
}
＜/style＞
＜/head＞
＜body＞
＜form＞
年龄：
＜input type="radio" name="radio" value="male" /＞男
＜input type="radio" name="radio" value="female" /＞女
＜/form＞
＜/body＞
＜/html＞
这段代码所示示例在页面打开时的页面显示如图19-34所示。
图19-34 E:indeterminate选择器的使用示例
用户只要选取其中任何一个单选框，使用E:indeterminate选择器指定的样式就被取消指定，如图19-35所示。
图19-35 用户选取任何一个单选框后，使用E:inde-terminate选择器指定的样式就会被取消
19.4.5 伪类选择器E::selection
E::selection伪类选择器用来指定当元素处于选中状态时的样式。
代码清单19-24为一个E::selection伪类选择器的使用示例，在该示例中分别给出了一个p元素，一个文本框控件以及一个表格。当p元素处于选中状态时，被选中文字变为红色；当文本框控件处于选中状态时，被选中文字变为灰色；当表格处于选中状态时，被选中文字变为绿色。
代码清单19-24 E::selection伪类选择器使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞E::selection伪类选择器使用示例＜/title＞
＜style type="text/css"＞
p::selection{
background:red;
color:#FFF;
}
p::-moz-selection{
background:red;
color:#FFF;
}
input[type="text"]::selection{
background:gray;
color:#FFF;
}
input[type="text"]::-moz-selection{
background:gray;
color:#FFF;
}
td::selection{
background:green;
color:#FFF;
}
td::-moz-selection{
background:green;
color:#FFF;
}
＜/style＞
＜/head＞
＜body＞
＜p＞这是一段测试文字。＜/p＞
＜input type="text" value="这是一段测试文字。"/＞＜p/＞
＜table border="1" cellspacing="0" cellpadding="0"＞
＜tr＞
＜td＞测试文字＜/td＞
＜td＞测试文字＜/td＞
＜/tr＞
＜tr＞
＜td＞测试文字＜/td＞
＜td＞测试文字＜/td＞
＜/tr＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-36所示。
图19-36 E::selection伪类选择器使用示例
19.4.6 伪类选择器E:invalid与E:valid
□ E:invalid伪类选择器用来指定，当元素内容不能通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素的规定格式（例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式）时的样式。
□ E:valid伪类选择器用来指定，当元素内容通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容符合元素的规定格式（例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式）时的样式。
代码清单19-25为一个E:invalid伪类选择器与E:valid伪类选择器的使用示例。示例页面中具有一个使用了required属性的input元素，当元素中没有被填入内容时元素背景色为红色，当元素中填入内容后元素背景色变为白色。
代码清单19-25 E:invalid伪类选择器与E:valid伪类选择器的使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞ E:invalid伪类选择器与E:valid伪类选择器结合使用示例
＜/title＞
＜style type="text/css"＞
input[type="text"]:invalid{
background-color: red;
}
input[type="text"]:valid{
background-color: white;
}
＜/style＞
＜/head＞
＜body＞
＜form＞
＜p＞请输入任意文字：＜input type="text" required/＞
＜/p＞
＜/form＞
＜/body＞
＜/html＞
19.4.7 伪类选择器E:required与E:optional
□ E:required伪类选择器用来指定允许使用required属性，且已经指定了required属性的input元素、select元素以及textarea元素的样式。
□ E:optional伪类选择器用来指定允许使用required属性，且未指定required属性的input元素、select元素以及textarea元素的样式。
代码清单19-26为一个E:required伪类选择器与E:optional伪类选择器的使用示例。示例页面中具有两个分别用于输入姓名与住址的文本框，并且对用于输入姓名的文本框指定了required属性，不对用于输入住址的文本框指定required属性。同时通过E:required伪类选择器指定用于输入姓名的文本框边框为红色，宽度为3px，通过E:optional伪类选择器指定用于输入住址的文本框边框为黑色，宽度为1px。
代码清单19-26 E:required伪类选择器与E:optional伪类选择器的使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞ E:required伪类选择器与E:optional伪类选择器结合使用示例＜/title＞
＜style type="text/css"＞
input[type="text"]:required{
border-color: red;
border-width:3px;
}
input[type="text"]:optional{
border-color: black;
border-width:1px;
}
＜/style＞
＜/head＞
＜body＞
＜form＞
姓名：＜input type="text" required placeholder="必须输入姓名"/＞＜br/＞
住址：＜input type="text"/＞
＜/form＞
＜/body＞
＜/html＞
19.4.8 伪类选择器E:in-range与E:out-of-range
□ E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），且实际输入值在该范围内时使用的样式。
□ E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），但实际输入值在该范围之外时使用的样式。
代码清单19-27为一个E:in-range伪类选择器与E:out-of-range伪类选择器的使用示例。示例页面中包含一个数值输入控件（type属性值为number的input元素），通过min属性值与max属性值限定元素内的有效输入数值为从1到100，通过E:in-range伪类选择器指定元素内的输入值在该范围内时元素背景色为白色，通过E:out-of-range伪类选择器指定元素内的输入值在该范围之外时元素背景色为红色。
代码清单19-27 E:in-range伪类选择器与E:out-of-range伪类选择器的使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html;charset=gb2312" /＞
＜title＞E:in-range伪类选择器与E:out-of-range伪类选择器结合使用示例＜/title＞
＜style type="text/css"＞
input[type="number"]:in-range{
background-color: white;
}
input[type="number"]:out-of-range{
background-color: red;
}
＜/style＞
＜/head＞
＜body＞
＜form＞
请输入1到100之内的数值：＜input type=number min=0 max=100 ＞
＜/form＞
＜/body＞
＜/html＞
19.5 通用兄弟元素选择器
关于选择器部分，最后要介绍的一个选择器是通用兄弟元素选择器，它用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。它的使用方法如下所示。
＜子元素＞ ～＜子元素之后的同级兄弟元素＞ {
// 指定样式
}
这里的同级是指子元素和兄弟元素的父元素是同一个元素。
代码清单19-28为一个通用兄弟元素选择器的使用示例，该示例中对所有div元素之后的，与div元素处于同级的p元素指定其背景色为绿色，但是对div元素内部的p元素的背景色不做指定。
代码清单19-28 通用兄弟元素选择器的使用示例
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞
＜style type="text/css"＞
div ～ p {background-color:#00FF00;}
＜/style＞
＜title＞通用兄弟元素选择器 E ～ F＜/title＞
＜/head＞
＜body＞
＜div style="width:733px; border: 1px solid #666; padding:5px;"＞
＜div＞
＜p＞p元素为div元素的子元素＜/p＞
＜p＞p元素为div元素的子元素＜/p＞
＜/div＞
＜hr /＞
＜p＞p元素为div元素的兄弟元素＜/p＞
＜p＞p元素为div元素的兄弟元素＜/p＞
＜hr /＞
＜p＞p元素为div元素的兄弟元素＜/p＞
＜hr /＞
＜div＞p元素为div元素的子元素＜/div＞
＜hr /＞
＜p＞p元素为div元素的兄弟元素＜/p＞
＜/div＞
＜/body＞
＜/html＞
这段代码的运行结果如图19-37所示。
图19-37 通用兄弟元素选择器的使用示例