今天看到的 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行文字

arrow
arrow
    文章標籤
    css css3 :target 選取器
    全站熱搜

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

    E-mail轉寄