CSS偽類 動態鏈結

2021-04-16 06:08:39 字數 1340 閱讀 7746

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

1.語法

selector:pseudo-class

(選擇符:偽類 )

偽類和類不同,是css已經定義好的,不能象類選擇符一樣隨意用別的名字,根據上面的語法可以解釋為物件(選擇符)在某個特殊狀態下(偽類)的樣式。

類選擇符及其他選擇符也同樣可以和偽類混用:

selector.class:pseudo-class

(選擇符.類:偽類 )

2.錨的偽類

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

a:link /* 未訪問的鏈結 */

a:visited /* 已訪問的鏈結 */

a:hover /* 滑鼠在鏈結上 */

a:active /* 啟用鏈結 */

(上面這個例子中,這個鏈結未訪問時的顏色是紅色並無下劃線,訪問後是綠色並無下劃線,啟用鏈結時為藍色並有下劃線,滑鼠在鏈結上時為紫色並有下劃線)

注意:有時這個鏈結訪問前滑鼠指向鏈結時有效果,而鏈結訪問後滑鼠再次指向鏈結時卻無效果了。這是因為你把a:hover放在了a:visited的前面,這樣的話由於後面的優先順序高,當訪問鏈結後就忽略了a:hover的效果。所以根據疊層順序,我們在定義這些鏈結樣式時,一定要按照a:link, a:visited, a:hover, a:actived的順序書寫。

3.偽類和類選擇符

a.red:link

a.red:visited

a.blue:link

a.blue:visited

這是第一組鏈結

這是第二組鏈結

4.其他偽類

此外css2還定義了首字和首行(first-letter和first-line)的偽類,可以對元素的首字或首行設定不同的樣式。

下面看這個例子,我們在段落標記裡定義文字首字尺寸為預設大小的3倍:

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

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

…… 這是段落的第一行

這是段落的第二行

這是段落的第三行

(上例中段落的第一行為紅色,第

二、三行為預設顏色)

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

CSS入門 偽類 動態鏈結

偽類 動態鏈結 偽類可以看做是一種特殊的類選擇符,是能被支援css的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對鏈結在不同狀態下定義不同的樣式效果。1.語法 偽類的語法是在原有的語法裡加上乙個偽類 pseudo class selector pseudo class 選擇符 偽類 偽類和類...

CSS入門 偽類 動態鏈結

偽類 動態鏈結 偽類可以看做是一種特殊的類選擇符,是能被支援css的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對鏈結在不同狀態下定義不同的樣式效果。1.語法 偽類的語法是在原有的語法裡加上乙個偽類 pseudo class selector pseudo class 選擇符 偽類 偽類和類...

css 3鏈結偽類與動態偽類

鏈結偽類link 表示作為超連結,並指向乙個未訪問的位址的所有錨 鏈結偽類不可以加在div上 點我點我點我 我是div啦 view code 點我點我點我 view code 可以利用target寫乙個div切換 div1 div2 div3 div1 div2 div3 view code 動態偽...