在介绍完了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所示。
另外，在使用样式指定root元素与body元素的背景时，根据不同的指定条件背景色的显示范围会有所变化，这一点请注意。如同样是上面这个示例，如果采取如下所示的样式，不使用root选择器来指定root元素的背景色，只指定body元素的背景色，则整个页面就全部变成绿色的了。
<style type="text/css">
body{
background-color: limegreen;
}
</style>
删除root选择器后的页面如图19-11所示。
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所示。
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所示。
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所示。
