CSS入門:偽類——動態連結

來源:互聯網
上載者:User
css|動態|連結

偽類——動態連結

偽類可以看做是一種特殊的類選擇符,是能被支援CSS的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對連結在不同狀態下定義不同的樣式效果。

1. 文法

偽類的文法是在原有的文法裡加上一個偽類(pseudo-class):
selector:pseudo-class {property: value}
(選擇符:偽類 {屬性: 值})
偽類和類不同,是CSS已經定義好的,不能象類選擇符一樣隨意用別的名字,根據上面的文法可以解釋為對象(選擇符)在某個特殊狀態下(偽類)的樣式。

類選擇符及其他選擇符也同樣可以和偽類混用:
selector.class:pseudo-class {property: value}
(選擇符.類:偽類 {屬性: 值})

2. 錨的偽類

我們最常用的是4種a(錨)元素的偽類,它表示動態連結在4種不同的狀態:link、visited、active、hover(未訪問的連結、已訪問的連結、啟用連結和滑鼠停留在連結上)。我們把它們分別定義不同的效果:

a:link {color: #FF0000; text-decoration: none} /* 未訪問的連結 */
a:visited {color: #00FF00; text-decoration: none} /* 已訪問的連結 */
a:hover {color: #FF00FF; text-decoration: underline} /* 滑鼠在連結上 */
a:active {color: #0000FF; text-decoration: underline} /* 啟用連結 */

(上面這個例子中,這個連結未訪問時的顏色是紅色並無底線,訪問後是綠色並無底線,啟用連結時為藍色並有底線,滑鼠在連結上時為紫色並有底線)
注意:有時這個連結訪問前滑鼠指向連結時有效果,而連結訪問後滑鼠再次指向連結時卻無效果了。這是因為你把a:hover放在了a:visited的前面,這樣的話由於後面的優先順序高,當訪問連結後就忽略了a:hover的效果。所以根據疊層順序,我們在定義這些連結樣式時,一定要按照a:link, a:visited, a:hover, a:actived的順序書寫。

3. 偽類和類選擇符

將偽類和類組合起來用,就可以在同一個頁面中做幾組不同的連結效果了,例如,我們定義一組連結為紅色,訪問後為藍色;另一組為綠色,訪問後為黃色:

a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}

現在應用在不同的連結上:

<a class="red" href="...">這是第一組連結</a>
<a class="blue" href="...">這是第二組連結</a>

4. 其他偽類

此外CSS2還定義了首字首行(first-letter和first-line)的偽類,可以對元素的首字或首行設定不同的樣式。
下面看這個例子,我們在段落標記裡定義文本首字尺寸為預設大小的3倍:

<style type=”text/css”>
p:first-letter {font-size: 300%}
</style>
……
<p>
這是一個段落,這個段落的首字被放大了。
</p>

我們再定義一個首行樣式的例子:

<style type=”text/css”>
div:first-line {color: red}
</style>
……
<div>
<p>
這是段落的第一行
這是段落的第二行
這是段落的第三行
</p>
</div>

(上例中段落的第一行為紅色,第二、三行為預設顏色)

注意:首字和首行的偽類需要IE5.5以上的版本支援。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。