一個超連結元素被參訪後，會應用此設計的風格。
依據階層原則，先定義的會被後定義的蓋掉。所以 A:hover 必須接在 A:link， A:visited 之後；A:active 要接在 A:hover 之後。
- 風格用法：
<style type='text/css'>
a.t2 { text-decoration: underline overline;
background: #ffdddd;
}
a.t2:link { color: blue }
a.t2:visited { color: black ;
text-decoration:line-through;
}
a.t2:hover { color: red;
font-size:140%;
}
a.t2:active { color: green }
</style>
<a class='t2' href='http://www.nctu.edu.tw'>交通大學</a> |
<a class='t2' href='http://www.ntu.edu.tw'>台灣大學</a> |
<a class='t2' href='http://www.ncku.edu.tw'>成功大學</a> - 執行結果： 交通大學 | 台灣大學 | 成功大學
將 :visited 狀態傳給子元素與下一個元素。下例用到 E + F 規則。
- 風格用法：
<style type='text/css'>
.vs {border:solid 4px green; margin:6px}
.vs SPAN {display:none}
.vs:visited {text-decoration:none}
.vs:visited SPAN
{display:inline; background:white; color:red}
.vs:visited + SPAN
{display:none}
</style>
<a href='http://ant2legs.blogspot.com' class=vs>螞蟻的窩
<span> 這個站已經看過了。</span>
</a>
<span>歡迎參觀。</span> - 執行結果： 螞蟻的窩 這個站已經看過了。 歡迎參觀。
- 上例，IE6 不支援 E + F 規則；Firefox, Safari, Chrome 成功。使用 E ~ F 規則可得到相同的結果。
