2.5 目标伪类选择器
目标伪类选择器“:target”是众多实用的CSS3特性中的一个，用来匹配文档（页面）的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个井号（#），后面带有一个标志符名称，例如“#contact”“:target”就是用来匹配ID为“contact”的元素的。换种说法，在Web页面中，一些URL拥有片段标识符，它由一个井号（#）后跟一个锚点或元素ID组合而成，可以链接到页面的某个特定元素。“:target”伪类选择器选取链接的目标元素，然后供定义样式。
2.5.1 目标伪类选择器语法
目标伪类选择器的语法如表2-7所示。
注
意 目标伪类选择器是动态选择器，只有存在URL指向该匹配元素时，样式效果才会生效。
2.5.2 浏览器兼容性
浏览器兼容性如表2-8所示。
表2-8 目标伪类选择器浏览器兼容性
选择器
E:target 9 +√ √ √ 9.6 +√ √
从表2-8可知，目标伪类选择器在IE 8及之前版本不被支持，但IE 用户点击目录里的链接仍将跳转到相应的标题，只是标题不会高亮显示。
提
示 在包含更多内容的页面中，高亮显示效果的确能给用户带来极好的体验。如果页面效果需要兼容IE低版本浏览器，就要用到JavaScript。这里有一些资源供大家参考。
●?“Suckerfish :target”，作者：Patrick Griffiths 和Dan Webb，网址如下。
?http://www.htmldog.com/articles/suckerfish/target
●?“Improving the usability of within-page links ”，作者：Bruce Lawson，网址如下。
?http://dev.opera.com/articles/view/improving-the-usability-of-within-page-l/
2.5.3 实战体验：制作手风琴效果
以前制作手风琴效果（Accordion）需要依赖JavaScript脚本。CSS3的目标伪选择器可不使用任何JavaScript代码实现手风琴效果。
页面中有三个区块，默认状态只显示三个区块的标题，点击其中一个标题时，其对应的内容就会显示；点击另一个标题时，对应区块内容将显示，而前一块内容将隐藏。目标伪类选择器制作的页面效果如图2-16所示。
通过目标伪类选择器“E:target”，显示和隐藏不同栏目的内容，从而实现手风琴效果。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>垂直手风琴</title>
<style type="text/css">
.accordionMenu {
background: #fff;
color:#424242;
font: 12px Arial, Verdana, sans-serif;
margin:0 auto;
padding: 10px;
width: 500px;
}
.accordionMenu h2 {
margin:5px 0;
padding:0;
position: relative;
}
.accordionMenu h2:before {/*制作向下三角效果*/
border: 5px solid #fff;
border-color: #fff transparent transparent;
content:"";
height: 0;
position:absolute;
right: 10px;
top: 15px;
width: 0;
}
.accordionMenu h2 a {/*制作手风琴标题栏效果*/
background: #8f8f8f;
background: -moz-linear-gradient( top, #cecece, #8f8f8f);
background: -webkit-gradient(linear, left top, left bottom,
from(#cecece), to(#8f8f8f));
background: -webkit-linear-gradient( top, #cecece, #8f8f8f);
background: -o-linear-gradient( top, #cecece, #8f8f8f);
background: linear-gradient( top, #cecece, #8f8f8f);
border-radius: 5px;
color:#424242;
display: block;
font-size: 13px;
font-weight: normal;
margin:0;
padding:10px 10px;
text-shadow: 2px 2px 2px #aeaeae;
text-decoration:none;
}
.accordionMenu :target h2 a, /*目标标题的效果*/
.accordionMenu h2 a:focus,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:active {
background: #2288dd;
background: -moz-linear-gradient( top, #6bb2ff, #2288dd);
background: -webkit-gradient(linear, left top, left bottom,
from(#6bb2ff), to(#2288dd));
background: -webkit-linear-gradient( top, #6bb2ff, #2288dd);
background: -o-linear-gradient( top, #6bb2ff, #2288dd);
background: linear-gradient( top, #6bb2ff, #2288dd);
color:#FFF;
}
.accordionMenu p {/*标题栏对应的内容*/
margin:0;
height: 0;/*默认栏目内容高度为0，达到隐藏效果*/
overflow: hidden;
padding:0 10px;
-moz-transition: height 0.5s ease-in;
-webkit-transition: height 0.5s ease-in;
-o-transition: height 0.5s ease-in;
transition: height 0.5s ease-in;
}
/*这部分是显示内容的关键代码*/
.accordionMenu :target p {/*展开对应目标内容*/
height:100px;/*显示对应目标栏内容*/
overflow: auto;
}
.accordionMenu :target h2:before {/*展开时标题三角效果*/
border-color: transparent transparent transparent #fff;
}
</style>
</head>
<body>
<div class="accordionMenu">
<div class="menuSection" id="brand">
<h2><a href="#brand">Brand</a></h2>
<p>Lorem ipsum dolor...</p>
</div>
<div class="menuSection" id="promotion">
<h2><a href="#promotion">Promotion</a></h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="menuSection" id="event">
<h2><a href="#event">Event</a></h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</body>
</html>
维基百科的官网上就运用了目标伪类选择器来高亮显示脚注，如图2-17所示。
图2-17 目标伪类选择器高亮显示区块的运用
点击注解的上标链接时，其对应的注解内容区块就会高亮显示，以便用户在众多内容中找到对应的注解内容，方便用户阅读，而实现此功能仅一行代码就完成了。
ol.references > li:target, sup.reference:target, cite:target ｛
background-color：#def;
｝
除了能制作手风琴效果、高亮显示脚注之外，目标伪类选择器还可以用在以下场景，如表2-9所示。
表2-9 “:target”应用场景
效果 地址
高亮显示区块 http://www.red-team-design.com/get-to-know-your-css3-target-pseudo-class
从相互层叠的盒容器或图片中突出显示其中一项 http://virtuelvis.com/ gallery/ css3/ target/interface.html
tabs效果 http://css-tricks.com/css3-tabs/
幻灯片效果 http://designmodo.com/slider-css3/
灯箱效果 http://www.decodize.com/demos/CSS3-target-pseudo-class/gallery.html
相册效果 http://www.ie7nomore.com/fun/scroll/
注意 其中几项效果使用JavaScript制作效果会更好，因为纯CSS的版本可能存在潜在的易用性和可用性问题。
