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...