实现原理利用:target，把a标签自身的href以及id设置成一样的。
案例1：实现元素的切换
HTML：
<div id="box">
<a href="#a" id="a">
<p>我是P1的内容</p>
</a>
<a href="#b" id="b">
<p>我是P2的内容</p>
</a>
</div>
CSS：
body,div{
margin:0;
padding:0;
}
#box>a{
display:none;
}
#box>a:first-of-type{
display:block;
}
#box>a:target{
display:none;
}
#box>a:target + a{
display:block;
}
效果
点击后成这样。
再次点击
实现的原理就是先让所有的a标签隐藏，让第一个显示，当点击的时候让自己隐藏让它的下一个兄弟元素显示，其实这里有个坑，一开始实现这个效果的时候我以为会出问题，其实光这句话是不够的，刚刚碰巧我使用了
#box>a:first-of-type{
display:block;
}
其实很关键，因为+号是匹配不了它的上一个兄弟元素的，不太好解释，自己去想吧。
案例2：通过点击事件结合模拟父元素选择器使用可以看这篇文章：CSS中模拟父元素选择器
案例3：利用target制作的tab切换可以看这篇文章：CSS3选择器的研究，案例 ctrl+f 搜索target
另外一种tab的实现，通过结合z-index
HTML:
<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">
tab1
</div>
<div id="tab2" class="tab_content">
tab2
</div>
<div id="tab3" class="tab_content">
tab3
</div>
CSS:
.tab_content {
border: 1px solid #ccc;
background: #fff;
padding: 20px;
height: 250px;
position: absolute;
top: 150px;
left: 0;
width: 600px;
}
div:first-of-type{
z-index:1;
}
div:target{
z-index:1;
}
效果：
当然还有其他可以做的，暂时没想到，有新想法再更新。