元素上有設為 超連結的錨，使用者點選超連結，跳到此元素時，會展現設計的風格。 <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>
將 :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>
兩層選單。此練習改寫 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>
