在支援 CSS 的瀏覽器中，連結的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和滑鼠移至上方狀態。
a:link {color: #FF0000} /* 未訪問的連結 */a:visited {color: #00FF00} /* 已訪問的連結 */a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */a:active {color: #0000FF} /* 選定的連結 */
例子
<html><head><style type="text/css">a.one:link {color: #ff0000}a.one:visited {color: #0000ff}a.one:hover {color: #ffcc00}a.two:link {color: #ff0000}a.two:visited {color: #0000ff}a.two:hover {font-size: 150%}a.three:link {color: #ff0000}a.three:visited {color: #0000ff}a.three:hover {background: #66ff66}a.four:link {color: #ff0000}a.four:visited {color: #0000ff}a.four:hover {font-family: monospace}a.five:link {color: #ff0000; text-decoration: none}a.five:visited {color: #0000ff; text-decoration: none}a.five:hover {text-decoration: underline}</style></head><body><p>請把滑鼠移動到這些連結上，以查看效果：</p><p><b><a class="one" href="/index.html" target="_blank">這個連結改變顏色</a></b></p><p><b><a class="two" href="/index.html" target="_blank">這個連結改變字型大小</a></b></p><p><b><a class="three" href="/index.html" target="_blank">這個連結改變背景顏色</a></b></p><p><b><a class="four" href="/index.html" target="_blank">這個連結改變字型系列</a></b></p><p><b><a class="five" href="/index.html" target="_blank">這個連結改變文本裝飾</a></b></p></body></html>
first-child 偽類
您可以使用 :first-child 偽類來選擇元素的第一個子項目。這個特定偽類很容易遭到誤解，所以有必要舉例來說明。考慮以下標記：
<html><head><style type="text/css">p:first-child { color: red; } </style></head><body><p>some text</p><p>some text</p></body></html>
運行結果：
some text
some text
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
