CSS基礎之偽類

2021-10-04 10:40:21 字數 1518 閱讀 9299

css偽類(pseudo classes)是用來新增一些選擇器的特殊效果。

選擇器示例

示例說明

:link

a:link

選擇所有未訪問鏈結

:visited

a:visited

選擇所有訪問過的鏈結

:active

a:active

選擇正在活動鏈結

:hover

a:hover

把滑鼠放在鏈結上的狀態

:focus

input:focus

選擇元素輸入後具有焦點

:first-letter

p:first-letter

選擇每個p 元素的第乙個字母

:first-line

p:first-line

選擇每個p 元素的第一行

:first-child

p:first-child 選擇器匹配屬於任意元素的第乙個子元素的 p元素

:before

p:before

在每個p元素之前插入內容

:after

p:after

在每個p元素之後插入內容

:lang(language)

p:lang(it)

為p元素的lang屬性選擇乙個開始值

selector:pseudo-class 

orselector.class:pseudo-class

"/css/" target="_blank">這是乙個鏈結

"red" href="css-syntax.html">css syntax

注意:a

:hover 必須在 a

:link 和 a

:visited 之後,需要嚴格按順序才能看到效果。

注意:a

:active 必須在 a

:hover 之後。

i am a strong man. i am a strong man.

i am a strong man. i am a strong man.

注意

:對於

:first-child 工作於 ie8以及更早版本的瀏覽器, doctype必須已經宣告.

some text "no">a quote in a paragraph some text.

在這個例子中,:lang定義了q元素的值為lang =「no」

注意

:僅當 !doctype已經宣告時 ie8支援

:lang.

注意

:僅當 !doctype已經宣告時 ie8支援

:focus.

CSS基礎 5 偽類

一 偽類 我們以a標籤為例 偽類標籤分為4類 1.設定超連結預設的樣式 a link 或者a 推薦使用這種方式 2.設定超連結訪問過後的樣式 a visited 注意 該偽類 visited 只能設定有關顏色的屬性。有瀏覽器快取問題 3.滑鼠移動到超連結上的樣式 a hover 4.超連結啟用狀態下...

css偽類,偽元素

偽類作用於整個元素,比如 a link a hover div first child 儘管這些條件都不是基於dom的,但結果沒乙個都是作用於乙個完整的元素,比如整個鏈結,段落,div等等 偽元素作用於元素一部分,比如 p first line p first letter 偽元素作用於元素的一部分...

CSS偽類 偽元素

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