《HTML 5与CSS 3 权威指南（第4版·下册）》 —16.3.2 选择器root、not、empty和target
16.3.2 选择器root、not、empty和target
在介绍完了CSS中的伪类选择器与伪元素选择器之后，让我们来看一下CSS 3中的结构性伪类选择器。结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式。
首先，我们来看4个最基本的结构性伪类选择器—root选择器、not选择器、empty选择器与target选择器。
1. root选择器
root选择器将样式绑定到页面的根元素中。根元素是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的“<html>”部分。
代码清单16-8为一个HTML页面，在该页面中，有一段文章，并且有一个文章的标题。
代码清单16-8 root选择器示例的HTML界面
针对这个网页，使用如下所示的root选择器来指定整个网页的背景色为黄色，将网页中body元素的背景色设为绿色。
<style type="text/css">
:root{
background-color: yellow;
}
body{
background-color: limegreen;
}
</style>
使用了root选择器后的运行结果如图16-10所示。
图16-10 root选择器使用示例
另外，在使用样式指定root元素与body元素的背景时，根据不同的指定条件背景色的显示范围会有所变化，这一点请注意。如同样是上面这个示例，如果采取如下所示的样式，不使用root选择器来指定root元素的背景色，只指定body元素的背景色，则整个页面就全部变成绿色的了。
<style type="text/css">
body{
background-color: limegreen;
}
</style>
删除root选择器后的页面如图16-11所示。
图16-11 删除root选择器后的显示效果
2.not选择器
如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。
譬如针对代码清单16-8所示的HTML页面，我们可以使用“body *”语句来指定body元素的背景色为黄色，但是使用“:not(h1)”语句中使用的not选择器排除h1元素，代码如下所示。
<style type="text/css">
body *:not(h1){
background-color: yellow;
}
</style>
使用not选择器后的运行结果如图16-12所示。
3. empty选择器
使用empty选择器来指定当元素中内容为空白时使用的样式。例如，在代码清单16-9所示的HTML页面中，有一个表格。可以使用empty选择器来指定当表格中某个单元格内容为空白时，该单元格背景为黄色。
代码清单16-9 empty选择器使用示例
使用empty选择器后的运行结果如图16-13所示。
图16-12 使用not选择器示例 图16-13 使用empty选择器示例
4.target选择器
使用target选择器来对页面中某个target元素（该元素的id被当作页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
接下来我们来看一个target选择器的使用示例。页面中包含几个div元素，每个div元素都存在一个书签，当用户点击了页面中的超链接跳转到该div元素时，该div元素使用target选择器中指定的样式，在target选择器中，指定该div元素的背景色变为黄色。其中指定target选择器时的代码如下所示。
target{
background-color: yellow;
}
该示例的详细代码如代码清单16-10所示。
代码清单16-10 target选择器使用示例
使用target选择器后的运行结果如图16-14所示。
图16-14 使用target选择器示例
- 点赞
- 收藏
- 关注作者
评论（0）