css中偽類的順序

2021-06-28 03:40:56 字數 1108 閱讀 8619

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

偽類的語法是在原有的語法裡加上乙個偽類(pseudo-class):

selector:pseudo-class

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

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

selector.class:pseudo-class

一、錨的偽類(注:css執行順序是 lvcha)

發生過程是:link  

:hover  

:active  

:visited

a:link

a:visited

a:hover

a:active

二、偽類和類選擇符(和第乙個的區別是,這個可以定義多種樣式。)

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

a.red:link

a.red:visited

a.blue:link

a.blue:visited

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

這是第一組鏈結

這是第二組鏈結

三、其他偽類

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

p:first-letter

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

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

div:first-line

……這是段落的第一行

這是段落的第二行

這是段落的第三行

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

二、三行為預設顏色)

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

css中的偽類和偽元素

一 css偽類 pseudo class 是用來新增一些選擇器的特殊效果。由於狀態的變化是非靜態的,所以元素達到乙個特定狀態時,它可能得到乙個偽類的樣式 當狀態改變時,它又會失去這個樣式。由此可以看出,它的功能和class有些類似,但它是基於文件之外的抽象,所以叫偽類。偽類的語法 selector ...

CSS中的偽類和偽元素

2019獨角獸企業重金招聘python工程師標準 偽類與類相似,但又沒有類附加標籤上。偽類分為ui偽類和結構化偽類。偽元素是在文件中若有實無的元素。主要有以下幾種 看到 after,大家腦子裡應該都能浮現出那個清除浮動的css的吧。沒錯,就是這個。clearfix after仔細琢磨下它們的定義。偽...

css中的偽類和偽元素

2019獨角獸企業重金招聘python工程師標準 偽類與類相似,但又沒有類附加標籤上。偽類分為ui偽類和結構化偽類。偽元素是在文件中若有實無的元素。主要有以下幾種 看到 after,大家腦子裡應該都能浮現出那個清除浮動的css的吧。沒錯,就是這個。1 2 3 4 5 6 7 clearfix aft...