css3 UI元素狀態偽類選擇器

2022-03-16 07:50:11 字數 751 閱讀 6891

選擇器

說明例子/備註

e:hover

當滑鼠移到元素上元素所使用的樣式

:hover{}或input:[type="text"]:hover{}

e:active

當元素被啟用時使用的樣式

似hover

e:focus

當元素獲得游標焦點時

似hover

e:enabled

當元素處於可用狀態時

似hover

e:disabled

當元素處於不可選狀態

input:[type="text"]:disabled//

e:read-only

當元素處於唯讀

似disabled(主要是要在html部分設定為唯讀)

e:read-write

當元素處於非唯讀

html預設狀態都是非唯讀

e:checked

選框處於選中狀態

e:defauit

當頁面開啟時預設處於選中狀態

如果使用者將該選框改為非選中狀態,default設定的樣式仍然有用

e:indeterminate

當開啟頁面是選框沒有被預設選中的選框的樣式

使用者只要選取任何乙個單選框,使用e:indeterminate指定的樣式就會失效

e:: selection

當元素被選中

如你想複製網頁中的一段文字時,你選中的那一段文字就會變色,這個屬性可以指定變色的顏色

CSS3學習筆記2 UI元素狀態偽類選擇器

第3節.ui元素狀態偽類選擇器 part i 這種選擇器的共同特徵 指定的樣式只有當元素處於某種狀態時才起作用,在預設狀態下不起作用 css3中共有11種ui元素狀態偽類選擇器 e hover e active e focus e enable e disable e read only e rea...

CSS3之偽元素選擇器和偽類選擇器

偽類選擇器,和一般的dom中的元素樣式不一樣,它並不改變任何dom內容。只是插入了一些修飾類的元素,這些元素對於使用者來說是可見的,但是對於dom來說不可見。偽類的效果可以通過新增乙個實際的類來達到。a link a visited a hover a active在 css 定義中,a hover...

CSS3新增 結構偽類選擇器 偽元素選擇器

1.結構偽類選擇器 可方便的選取乙個或多個特定的元素 first child 選取屬於其父元素的首個子元素 last child 選取屬於其父元素的最後乙個子元素 nth child n 選擇第n個子元素 n even 2n 選取偶數孩子 n odd 2n 1 選取奇數孩子 2.偽元素選擇器 fir...