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