css偽類,偽元素

2021-06-29 14:39:22 字數 841 閱讀 2970

偽類作用於整個元素,比如:

a:link                                 

a:hover                              

div:first-child

儘管這些條件都不是基於dom的,但結果沒乙個都是作用於乙個完整的元素,比如整個鏈結,段落,div等等;

偽元素作用於元素一部分,比如:

p::first-line

p::first-letter

偽元素作用於元素的一部分,乙個段落的第一行或者第乙個字母;

:before於::before作用一樣,前者是css2的寫法,後者是css3的寫法

作用一:

:before和:after可以增加純css設計的複雜度,不需要多餘的標籤,我們可以使用偽元素新增額外的可樣式化的元素或層級。比如想在**號碼字型前面加上乙個**的icon圖示,我們就可以這樣做:

.phonenumber:before

作用二:

清除浮動

/* for modern browsers */.cf:before,.cf:after

.cf:after

/* for ie 6/7 (trigger haslayout) */

.cf

這裡 :before 阻止了 top-margin 合併, :after則用於清除浮動

CSS偽類 偽元素

css偽類用於向某些選擇器新增特殊的效果。錨偽類a link 未訪問的鏈結 a visited 已訪問的鏈結 a hover 滑鼠移動到鏈結上 a active 選定的鏈結 注意 1 在 css 定義中,a hover 必須被置於 a link 和 a visited 之後,才是有效的。2 在 cs...

CSS 偽元素 偽類

link 未訪問的鏈結 visited 已訪問的鏈結 hover 滑鼠移到元素上 active 向被啟用的鏈結新增樣式 focus 獲得輸入焦點的元素 first child 作為某元素的第乙個子元素的元素 lang 向帶有指定lang屬性的元素新增樣式 在 css 定義中,a hover 必須被置...

css偽類 偽元素

selector pseudo element first line 文字首行設定特殊的樣式 first letter 文字首字母設定特殊樣式 before 在元素的內容前面插入新內容 after 在元素的內容之後插入新的內容 selector pseudo classa link 未訪問的連線 a...