close



支援CSS3 以上

用法：:target
說明：
target  當被連接到的元素
配合用 a tag href 用#後加入元素id

css定義：
:target {
    border: 2px solid blue;
    background-color: gainsboro;
}
注意事項：


程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector target 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
:target {
    border: 2px solid blue;
    background-color: gainsboro;
}

</style>
</head>
<body>

<p><a href="#catalog1">商品 1</a></p>
<p><a href="#catalog2">商品  2</a></p>

<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p id="catalog1"><b>介紹 商品 1...</b></p>
<p id="catalog2"><b>介紹 商品 2...</b></p>
</body>
</html>

圖1：


圖2：



圖3：





測試結束~
如果還不了解可參考：w3schools CSS Selector Reference


感謝~

 




 






 
















其它文章

arrow
arrow
    文章標籤
    css3 target 目錄 程式 用法 測試 w3schools selector
    全站熱搜

    PG Levin Li 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄