19.3.2 选择器root、not、empty和target（3）
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选择器示例
相关HTML 5与CSS 3权威指南：选择器root、not、empty和target（3）