這篇文章主要介紹“css中的UI狀態偽類選擇器怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“css中的UI狀態偽類選擇器怎么使用”文章能幫助大家解決問題。

創新互聯成立10多年來，這條路我們正越走越好，積累了技術與客戶資源，形成了良好的口碑。為客戶提供成都網站建設、網站設計、網站策劃、網頁設計、國際域名空間、網絡營銷、VI設計、網站改版、漏洞修補等服務。網站是否美觀、功能強大、用戶體驗好、性價比高、打開快等等，這些對于網站建設都非常重要，創新互聯通過對建站技術性的掌握、對創意設計的研究為客戶提供一站式互聯網解決方案，攜手廣大客戶，共同發展進步。

UI狀態偽類選擇器，用于選擇處于某種狀態下的UI元素，主要用于HTML表單上，根據表單元素的不同狀態，定義不同的樣式，來增強用戶體驗。

UI狀態偽類選擇器的特征：指定的樣式只有在某種狀態下才起作用

表單元素的狀態包括獲得焦點、失去焦點、選中、未選中、可用、不可用、有效、無效、必填、選填、只讀等等。

1、E:hover選擇器

用來指定當鼠標指針移動到元素上時元素所使用的樣式

使用方法：

<元素>:hover{ 
CSS樣式 
}

我們可以在“<元素>”中添加元素的type屬性。

例：

    


    這是一個鏈接
    這是另一個鏈接

運行結果如下圖所示：

2、E:active選擇器

:active：定義點擊鏈接時的樣式。

通過:active偽類選擇器可以定義點擊鏈接時的樣式，示例代碼如下：

    


    這是一個鏈接
    這是另一個鏈接

運行結果如下圖所示：

3、E:link選擇器

:link：定義普通或未訪問鏈接的樣式；

通過:link偽類選擇器可以為普通或未訪問的鏈接設置樣式，示例代碼如下：

    


    這是一個鏈接
    這是另一個鏈接

運行結果如下圖所示：

4、E:visited選擇器

:visited：定義已經訪問過鏈接的樣式；

通過:visited偽類選擇器可以為已經訪問過的鏈接設置樣式，示例代碼如下：

    


    這是一個鏈接
    這是另一個鏈接

運行結果如下圖所示：

5、E:focus選擇器

:focus：用來指定元素獲得光標聚焦點使用的樣式

示例代碼如下：

選擇器E:hover、E:active和E:focus

姓名：


密碼：

6、E:enabled偽類選擇器與E:disabled偽類選擇器

1)、E:enabled選擇器被用來指定當元素處于可用狀態時的樣式。
2)、E:disabled選擇器被用來指定當元素處于不可用狀態時的樣式。

E:enabled偽類選擇器與E:disabled偽類選擇器

姓名：


學校：

7、E:read-only偽類選擇器與E:read-write偽類選擇器

1)、E:read-only選擇器被用來指定當元素處于只讀狀態時的樣式。
2)、E:read-write選擇器被用來指定當元素處于非只讀狀態時的樣式。

read-only偽類選擇器與E:read-write偽類選擇器

姓名：


學校：

8、偽類選擇器E:checked、E:default和indeterminate

1)、E:cehcked偽類選擇器用來指定當表單中的radio單選框或者是checkbox復選框處于選取狀態時的樣式。
2)、E:default選擇器用來指定當頁面打開時默認處于選取狀態的單選框或復選框的控件的樣式。
3)、E:indeterminate選擇器用來指定當頁面打開時，一組單選框中沒有任何一個單選框被設定為選中狀態時，整組單選框的樣式。

checked偽類選擇器

房屋狀態： 水 電 天然氣 寬帶

默認的選擇項

default偽類選擇器

房屋狀態： 水 電 天然氣 寬帶

indeterminate偽類選擇器

性別： 男 女

9、偽類選擇器E::selection

E:selection偽類選擇器用來指定當元素處于選中狀態時的樣式。

偽類選擇器E::selection

10、E:invalid偽類選擇器與E:valid偽類選擇器

1)、E:invalid偽類選擇器用來指定，當元素內容不能通過HTML5通過使用的元素的諸如requirde等屬性所指定的檢查或元素內容不符合元素規定的格式時的樣式。
2)、E:valid偽類選擇器用來指定，當元素內容能通過HTML5通過使用的元素的諸如requirde等屬性所指定的檢查或元素內容符合元素規定的格式時的樣式。

E:invalid偽類選擇器與E:valid偽類選擇器

11、E:required偽類選擇器與E:optional偽類選擇器

1)、E:required偽類選擇器用來指定允許使用required屬性，而且已經指定了required屬性的input元素、select元素以及textarea元素的樣式。
2)、E:optional偽類選擇器用來指定允許使用required屬性，而且未指定了required屬性的input元素、select元素以及textarea元素的樣式。

	
		
		
		
	
	
		
E:required偽類選擇器與E:optional偽類選擇器
		

			姓名：
			
			
			學校：
	

12、E:in-range偽類選擇器與E:out-of-range偽類選擇器

1)、E:in-range偽類選擇器用來指定當元素的有效值被限定在一段范圍之內，且實際的輸入值在該范圍之內時的樣式。
2)、E:out-of-range偽類選擇器用來指定當元素的有效值被限定在一段范圍之內，但實際輸入值在超過時使用的樣式。

E:in-range偽類選擇器與E:out-of-range偽類選擇器

各UI元素狀態偽類選擇器受瀏覽器的支持情況

關于“css中的UI狀態偽類選擇器怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注創新互聯行業資訊頻道，小編每天都會為大家更新不同的知識點。