19.3.2 选择器root、not、empty和target（1）
在介绍完了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选择器后的显示效果
相关HTML 5与CSS 3权威指南：选择器root、not、empty和target（1）