今天看到的 CSS3 :target選擇器

還滿有趣的

css如下

<style>
:target
{
border: 2px solid #fff;
background-color: #000;
color:#fff;
}
</style>

html如下

 
<p><a href="#news1">反白第1行</a></p>
<p><a href="#news2">反白第2行</a></p>

<p>點上面的連結,可以反白下面的文字</p>

<p id="news1">第1行文字</p>
<p id="news2">第2行文字</p>

 

說明:

重點在a的href當被點選之後,id=news1的元件會被套上:target的樣式,要取消的話只要其他id被啟動就取消了。

限制:

IE好像要到9以上版本才支援

實際DEMO

反白第1行

反白第2行

點上面的連結,可以反白下面的文字

第1行文字

第2行文字

文章標籤
創作者介紹
創作者 欸取低 的頭像
欸取低

硬碟裡的雜七雜八

欸取低 發表在 痞客邦 留言(0) 人氣()