首頁 > web前端 > css教學 > CSS教學(三)偽類-動態鏈接

CSS教學(三)偽類-動態鏈接

巴扎黑
發布: 2017-04-01 14:00:55
原創
2019 人瀏覽過

偽類可以看做是一種特殊的類別選擇符,是能被支援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}
現在套用在不同的連結:
這是第一組連結
這是第二組連結
4.  其他偽類

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

……


這是一個段落,這個段落的首字被放大了。



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

……



這是段落的第一行
這是段落的第二行
這是段落的第三行



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

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

以上是CSS教學(三)偽類-動態鏈接的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板