css3 :target 選取器－硬碟裡的雜七雜八

今天看到的 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以上版本才支援

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

第1行文字

第2行文字

欸取低

硬碟裡的雜七雜八

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

E-mail轉寄