CSS选择器4-目标伪类选择器

目标伪类选择器介绍

前面介绍了动态伪类选择器CSS选择器3-动态伪类选择器。这边文章主要介绍目标伪类选择器(:target), 该选择器主要是实现选择URL中指定的目标元素。在一个HTML文档中，当点击一个页面中一个带#符号的链接时，浏览器会滚动到对应的目标元素中。简单的去说就是在HTML页面中，一些URL拥有片段标志符，格式为:#锚点|元素ID，并可以链接到页面的某个特定元素，目标伪类选择器主要选取URL指向的目标元素，并且提供目标元素的样式。

目标伪类定义

定义: E:target

描述: 选择匹配的E元素，并且选择E元素中href属性指向的目标元素。

目标伪类使用示例

之前在HTML页面中实现一个手风琴效果需要引入JavaScript脚本。下面的例子中实现了一个手风琴的效果。现在通过CSS3可以在不依赖JavaScript脚本的情况就可以实现一个手风琴效果。
下面例子中的页面中有三块区域，默认情况下只显示三块区域的标题信息。点击其中任意一个标题，该标题下面的内容会展开，同时其他两个标题下面的内容会收起。这个效果就是一个手风琴效果。

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>CSS实现手风琴</title>
  </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, consectetur...</p>
      </div>
    </div>
  </body>
</html>

.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: 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: linear-gradient(top, #8f8f8f, #2288dd);
  color: #fff;
}
.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);
}
.accordionMenu p {
  margin: 0;
  height: 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;
}