:target

版本： CSS3

:target CSS 伪类，代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配。

语法:

E : target { sRules }

匹配相关URL指向的E元素。 解释: URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(targetelement)，:target选择器用于选取当前活动的目标元素。

例如，以下URL拥有一个片段(以#标识的)，该片段指向一个ID为section2的页面元素: 

http://www.example.com/index.html#section2

若当前URL等于上面的URL，下面的元素可以通过:target选择器被选中： 

<section id="section2">example</section>

浏览器支持

IE9+以及新版浏览器都支持 :target

例子

:target 伪类可用于加亮显示页面中可从表格内容中链接到的部分。 

//html

<h3>table of contents</h3>
<ol>
 <li><a href="#p1">jump to the first paragraph!</a></li>
 <li><a href="#p2">jump to the second paragraph!</a></li>
 <li><a href="#nowhere">this link goes nowhere,
   because the target doesn't exist.</a></li>
</ol>

<h3>my fun article</h3>
<p id="p1">you can target <i>this paragraph</i> using a
  url fragment. click on the link above to try out!</p>
<p id="p2">this is <i>another paragraph</i>, also accessible
  from the links above. isn't that delightful?</p>

//CSS

p:target {
  background-color: gold;
}

/* 在目标元素中增加一个伪元素*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: .25em;
}

/*在目标元素中使用italic样式*/
p:target i {
  color: red;
}

你可以不使用任何Javascript代码，只使用 :target 伪类创建一个加亮框。该技术依赖于初始化时就隐藏在页面中的链接到指定元素的锚。一旦定位，CSS就会更改其 display 以便显示它们。 

//html

<ul>
  <li><a href="#example1">open example #1</a></li>
  <li><a href="#example2">open example #2</a></li>
</ul>

<div class="lightbox" id="example1">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>lorem ipsum dolor sit amet, consectetur adipiscing elit.
      donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>cras risus odio, pharetra nec ultricies et,
      mollis ac augue. nunc et diam quis sapien dignissim auctor.
      quisque quis neque arcu, nec gravida magna.</figcaption>
  </figure>
</div>


//CSS

/* unopened lightbox */
.lightbox {
  display: none;
}

/* opened lightbox */
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* lightbox content */
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}

/* close button */
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/* lightbox overlay */
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  content: "";
  cursor: default;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
:target{
	background-color:pink;
}
</style>
</head>
<body>
	<a href="#html">点击</p>
	<pid="html">htmlCSS中文手册</p>
</body>
</html>
点击 CSS中文手册

上篇： :empty