selector UI元素狀態偽類

2022-02-15 11:27:52 字數 2378 閱讀 2395

結合css2.0和css3.0,ui元素狀態偽類共有以下幾個,仍然是結合例項來看.

**

效果

<

html

xmlns

="">

<

head

>

<

title

>無標題頁

title

>

<

style

type

="text/css">

*

style

>

head

>

<

body

>

<

a href

="htmlpage.htm">超級鏈結

a><

br />

<

a>超級鏈結

a><

br />

<

input

type

="checkbox"

checked

="checked"

value

="1" />男

<

input

type

="checkbox" />女<

br />

<

input

type

="text"

value

="預設都是enabled" /><

br />

<

input

type

="text"

value

="disabled"

disabled

="disabled" />

<

br />

<

p>選中部分會高亮

僅能在a物件上使用.用於設定a元素未被訪問時的樣式.

對於無href的a物件無效.

僅能在a物件上使用.用於設定a元素訪問過後的樣式.

對於無href的a物件無效.

p:hover

e:hover

設定滑鼠在物件上懸停時的樣式.

設定物件在被使用者啟用(在滑鼠點選與釋放之間發生的事件)時的樣式.

設定元素在成為輸入焦點時的樣式.

設定元素被選中時的樣式.

設定使用者介面中處於可用狀態的e元素

設定使用者介面中處於不可用的e元素

匹配e元素中被使用者選中或處於高亮狀態的部分

偽元素 偽類

偽元素在dom中建立了一些抽象元素,而且這些元素本身時不存在與dom中的。在css3中偽元素前要使用 兩個冒號 比如 使用在使用 before 和 after時,要使用content進行內容設定。預設情況下,偽元素插入的內容為行內元素,不過可以使用display進行設定。注意 同時只能使用乙個偽元素...

偽類 偽元素

偽類和偽元素在web開發中用的好的話,可以說猶如神助。但一定要分清楚,什麼是偽類,什麼是偽元素。如何區分偽元素與偽類?答 偽元素在html文件渲染後,頁面中有相應的內容顯示,同時能夠設定它的樣式,而偽類只能設定樣式 偽元素和元素的區別?答 很明顯,從字面意思上來說,偽元素就不是真正的元素,而只有形而...

偽類 偽元素

偽類和偽元素 偽類其實是為彌補css選擇器的不足,用來更方便地獲取資訊 而偽元素本質上是建立了乙個虛擬容器 元素 我們可以在其中新增內容或樣式 css3中,偽類用單冒號 表示 而偽元素用雙冒號 表示 before 偽元素可以在元素的內容前面插入新內容 after 偽元素以在元素的內容之後插入新內容 ...