元素上有設為 超連結的錨，使用者點選超連結，跳到此元素時，會展現設計的風格。
- 風格用法：
<style type='text/css'>
#game:target { color:red; background:white; }
#kfj:target { color:white; background:green; }
</style>
<a href='#game'>好玩遊戲，請點選此。</a>
<p><a href='#kfj'>孔子說，請點選此。</a>
<p id='game'>
射擊遊戲，賽車遊戲，益智遊戲，武打遊戲。</p>
<p id='kfj'>
孔子說：有朋自遠方來，不亦樂乎！</p> - 執行結果：
好玩遊戲，請點選此。
射擊遊戲，賽車遊戲，益智遊戲，武打遊戲。
孔子說：有朋自遠方來，不亦樂乎！
- IE6 無此項；Firefox, Safari, Chrome 皆成功。
將 :target 狀態傳給子元素與下一個元素。下例用到 E + F 規則。
- 風格用法：
<style type='text/css'>
.vs {border:solid 4px green; margin:6px}
.vs SPAN {display:none; background:white; color:red}
.vs:target {color:red}
.vs:target SPAN {display:inline;}
.vs:target + SPAN {display:none}
</style>
<a href='#ant'>點選此</a>
<p>
<span class=vs id='ant'>螞蟻的窩
<span> 謝謝參觀。</span>
</span>
<span>歡迎參觀。</span> - 執行結果：
點選此
螞蟻的窩 謝謝參觀。 歡迎參觀。
- 上例，Firefox 成功；Safari, Chrome 都不完整。使用 E ~ F 規則可得到相同的結果。
兩層選單。此練習改寫 Daniel Glazman 的範例，利用 :target 作兩層選單。也可以改寫將選單放在底部，會比較簡單。
- 風格用法：
<style type="text/css">
.menu {border:solid 1px red;
width:240px;
text-align:center;
}
.menu .list
{white-space:pre;
display:none;
}
.menu .list:target
{display:block;}
.menu .list:target ~ .first
{display:none;}
</style>
<div class=menu>
<div id='act' class=list><a href='#act'>動作遊戲</a> / <a href='#race'>競速遊戲</a>
<a href="http://gamelily.blogspot.com/2008/11/blog-post_3953.html">長劍客戰骷髏</a>
<a href="http://gamelily.blogspot.com/2008/11/blog-post_2534.html">坦克衝鋒戰</a>
</div>
<div id='race' class=list><a href='#act'>動作遊戲</a> / <a href='#race'>競速遊戲</a>
<a href="http://gamelily.blogspot.com/2008/11/blog-post_3232.html">摩托車飛峽谷</a>
<a href="http://gamelily.blogspot.com/2008/11/blog-post_430.html">城市碰碰車</a>
</div>
<span class=first><a href='#act'>動作遊戲</a> / <a href='#race'>競速遊戲</a></span>
</div> - 執行結果：
