實現原理利用: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;
}
效果：
當然還有其他可以做的，暫時沒想到，有新想法再更新。