在阅读 CSS Mastery Advanced Web Standards Solution (Second Edition) 这本书时 (中文名：精通CSS) 学到了一种以前从未使用过的伪类，结合书中的内容和网上的文章，举一个实战中可以运用到的例子

:target伪类与锚点#和id选择器密切相关

“:target CSS 伪类 代表一个唯一的页面元素(目标元素)，其ID与当前URL片段匹配 .” –from MDN

下面举一个切换标签的实例有助于理解

样式

代码

<div class="tab-box">

  <div class="tab" id="tab1">Tab1 无需JS</div>
  <div class="tab" id="tab2">Tab2 css :target伪类</div>
  <div class="tab" id="tab3">Tab3 标签切换效果</div>

  <div class="button-box">
    <a href="#tab1" class="button">Tab1</a>
    <a href="#tab2" class="button">Tab2</a>
    <a href="#tab3" class="button">Tab3</a>
  </div>

</div>

.tab-box{
  position: relative;
  width: 200px;
  height: 130px;
}
.tab{
  background: aliceblue;
  width: 100%;
  height: 100%;
  border: gray solid 2px;
  border-radius: 5px;
  position: absolute;
}
.button-box{
  position: absolute;
  bottom: -28px;
  left: 5px;
}
.button{
  display: inline-block;
  margin-left: 5px;
  padding-left: 4px;
  padding-right: 4px;
  text-decoration: none;
  color: #000000;
  background: aliceblue;
  border: gray solid 2px;
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;  
}
#tab1:target, #tab2:target, #tab3:target{
  z-index:1;
}

原理

用绝对定位使三个标签重叠，并在标签上增加锚点，用<a>标签链接定位到锚点，并在样式中ID选择器上加上:tanget伪类使id与<a>标签上的链接匹配时，即:tanget伪类激活，设置z-index: 1此时选中的标签覆盖其他标签，在上层显示。

文档

w3school中文 http://www.w3school.com.cn/cssref/selector_target.asp

MDN中文 https://developer.mozilla.org/zh-CN/docs/Web/CSS/:target