我们都知道当我们点击#id的连接后，如果网页中有这个id的，网页会自动跳动到其所在位置，如果网页中没有这个id，它就没有任何显示。

css3中添加了伪类:target，使用:target伪类可以让点击后的id有新的效果，比如改变颜色、位置等等。所以我们可以用它做很多效果，比如tab标签等等。

       伪类:target的使用方法和:link、:hover一样：

selector:target{color:#;/*other styles*/} 

Html代码：

<div class="tab_box">
<ul class="tabs">
<li><a href="#tab1">标签一</a></li>
<li><a href="#tab2">标签二</a></li>
<li><a href="#tab3">标签三</a></li>
</ul>
<div id="tab1" class="tab_content">

       第一层内容

<div id="tab1" class="tab_content"> 第一层内容</div>

       第二层内容 

<div id="tab2" class="tab_content"> 第二层内容</div>

       第三层内容

<div id="tab3" class="tab_content"> 第三层内容</div>

CSS代码：

<style type="text/css">
.tab_box {clear:both;height:40px;}
.tab_box li {float:left;border:1px solid #CCC;margin:0 5px 0 0;list-style:none;padding:5px;}
.tab_content {clear:both;border:1px solid #CCC;padding:20px;margin:40px; position: absolute; 
z-index:-1; background:#FFF;width:300px;height:200px;}
 #tab1:target, #tab2:target, #tab3:target {z-index: 1;}
</style>

CSS部分有一些内容是比较重要的，首先tab_content里面要使用定位属性position:absolute，让三个tab标签内容重叠起来，然后利用z-index:-1让他们处于Z轴的靠下层，另外，如果不定义背景为白色，三个层的内容会重叠起来，显得十分混乱。

最后一部分CSS就是利用target伪类改变其z轴层次的，他们是成功实现效果的关键。

将这些代码拷贝到网页中，然后预览。这里要注意一点，只有支持CSS3的浏览器才可以看到效果，比如Firefox、google Chrome、Opera，IE系列除了IE9以外，IE6、7、8是看不到效果的。

Demo