一文詳解css中的UI狀態偽類選擇器-css教學-PHP中文網

一文詳解css中的UI狀態偽類選擇器

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

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

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

##E:focusedE:checked#E:enabled##選擇表單中可用的元素3E:disabled選擇表單中不可用（即被停用）的元素3E:valid選擇表單中填寫的內容符合要求的元素#3E:invalid選擇表單中填寫的內容不符合要求的元素，如非法的URL或E-Mail，或與pattern 屬性給出的模式不符3E:in-range選擇表單中輸入的數字在有效範圍內的元素#3E:out-of -range###選擇表單中輸入的數字超出有效範圍的元素######3#############E:required#######選擇表單中必填的元素######3########3E:indeterminate選擇器表單中一組單選框中沒有任何一個單選框被選取時整組單選框的樣式，如果使用者選取了其中任何一個單選框，則該樣式被取消指定3

1、E:hover選擇器

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

使用方法：

<元素>:hover{ 
CSS样式 
}

登入後複製

我們可以在「<元素>」中加入元素的type屬性。

範例：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
    </style>
</head>
<body>
    <a href=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

登入後複製

運行結果如下圖所示：

一文詳解css中的UI狀態偽類選擇器

#2、E:active選擇器

:active：定義點擊連結時的樣式。

透過:active偽類別選擇器可以定義點擊連結時的樣式，範例程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
        a:active {
            background: #000;
            border: 1px solid black;
            color: white;
        }
    </style>
</head>
<body>
    <a href=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

登入後複製

執行結果如下圖所示：

一文詳解css中的UI狀態偽類選擇器

3、E:link選擇器

#:link：定義普通或未存取鏈接的樣式；

透過:link偽類別選擇器可以為普通或未存取的連結設定樣式，範例程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
    </style>
</head>
<body>
    <a href=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

登入後複製

執行結果如下圖所示：

一文詳解css中的UI狀態偽類選擇器

4、E:visited選擇器

#:visited：定義已經造訪過連結的樣式；

透過:visited偽類選擇器可以為已經造訪過的連結設定樣式，範例程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px soild red;
            color: red;
        }
    </style>
</head>
<body>
    <a href=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

登入後複製

運行結果如下圖所示：

一文詳解css中的UI狀態偽類選擇器

5、E:focus選擇器

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

範例程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器E:hover、E:active和E:focus</title>
<style>
input[type="text"]:hover{
            background: green;
        }
        input[type="text"]:focus{
            background: #ff6600;
            color: #fff;
        }
        input[type="text"]:active{
            background: blue;
        }
        input[type="password"]:hover{
            background: red;
        }
    </style>
</head>
<body>
<h1>选择器E:hover、E:active和E:focus</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名">
<br />
<br />
密码：<input type="password" placeholder="请输入密码"></form>
</body>
</html>

登入後複製

一文詳解css中的UI狀態偽類選擇器

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:enabled伪类选择器与E:disabled伪类选择器</title>
<style>
input[type="text"]:enabled{
            background: green;
            color: #ffffff;
        }
        input[type="text"]:disabled{
            background: #727272;
        }
    </style>
</head>
<body>
<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" disabled>
<br />
<br />
学校：<input type="text" placeholder="请输入学校"></form>
</body>
</html>

登入後複製

一文詳解css中的UI狀態偽類選擇器

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>read-only伪类选择器与E:read-write伪类选择器</title>
<style>
input[type="text"]:read-only{
            background: #000;
            color: green;
        }
        input[type="text"]:read-write{
            color: #ff6600;
        }
    </style>
</head>
<body>
<h1>read-only伪类选择器与E:read-write伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" value="winson" readonly>
<br />
<br />
学校：<input type="text" placeholder="请输入学校"></form>
</body>
</html>

登入後複製

一文詳解css中的UI狀態偽類選擇器

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

#1 )、E:cehcked偽類選擇器用來指定當表單中的radio單選框或是checkbox複選框處於選取狀態時的樣式。

2)、E:default選擇器用來指定當頁面開啟時預設處於選取狀態的單選方塊或複選框的控制項的樣式。
3)、E:indeterminate選擇器用來指定當頁面開啟時，一組單選框中沒有任何一個單選框被設定為選取狀態時，整組單選框的樣式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checked伪类选择器</title>
<style>
input[type="checkbox"]:checked{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>checked伪类选择器</h1>
<form>
房屋状态： <input type="checkbox">水 <input type="checkbox">电 <input type="checkbox">天然气 <input type="checkbox">宽带</form>
</body>
</html>

登入後複製

一文詳解css中的UI狀態偽類選擇器

預設的選擇項目

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>default伪类选择器</title>
<style>
input[type="checkbox"]:default{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>default伪类选择器</h1>
<form>
房屋状态： <input type="checkbox" checked>水 <input type="checkbox">电 <input type="checkbox">天然气 <input type="checkbox">宽带</form>
</body>
</html>

登入後複製

一文詳解css中的UI狀態偽類選擇器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>indeterminate伪类选择器</title>
<style>
input[type="radio"]:indeterminate{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>indeterminate伪类选择器</h1>
<form>
性别： <input type="radio">男 <input type="radio">女</form>
</body>
</html>

登入後複製

一文詳解css中的UI狀態偽類選擇器

9、偽類別選擇器E::selection

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器E::selection</title>
<style>
::selection{
            background: green;
            color: #ffffff;
        }
        input[type="text"]::selection{
            background: #ff6600;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>伪类选择器E::selection</h1>
<input type="text" placeholder="文本">
</body>
</html>

登入後複製

1一文詳解css中的UI狀態偽類選擇器

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:invalid伪类选择器与E:valid伪类选择器</title>
<style>
input[type="email"]:invalid{
            color: red;
        }
        input[type="email"]:valid{
            color: green;
        }
    </style>
</head>
<body>
<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>
<form>
<input type="email" placeholder="请输入邮箱"></form>
</body>
</html>

登入後複製

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

1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>E:required伪类选择器与E:optional伪类选择器</title>
		<style>
			input[type="text"]:required{
        background: red;
        color: #ffffff;
    }
        input[type="text"]:optional{
            background: green;
            color: #ffffff;
        }
    </style>
	</head>
	<body>
		<h1>E:required伪类选择器与E:optional伪类选择器</h1>
		<form>
			姓名：<input type="text" placeholder="请输入姓名" required>
			<br />
			<br />
			学校：<input type="text" placeholder="请输入学校"></form>
	</body>
</html>

登入後複製

12、E:in-range伪类选择器与E:out-of-range伪类选择器

1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
<style>
input[type="number"]:in-range{
            color: #ffffff;
            background: green;
 
        }
        input[type="number"]:out-of-range{
            background: red;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1><input type="number" min="0" max="100" value="0">
</body>
</html>

登入後複製

1一文詳解css中的UI狀態偽類選擇器

各UI元素状态伪类选择器受浏览器的支持情况

UI狀態偽類選擇器
#選擇器	#功能描述


選擇表單中獲得焦點的元素	3
選擇表單中被選取的radio或checkbox元素	3





E:optional	選擇表單中允許使用required屬性，且未指定為required的元素	3
E :read-only	選擇表單中狀態為唯讀的元素	3
E:read-write	選擇表單中狀態為非唯讀的元素	3
E:default	選擇表單中預設為選取狀態的單選方塊或複選框，即使使用者將該單選框或複選框控制項的選取狀態設定為非選取狀態，E:default選擇器中指定的樣式仍然有效

选择器	Firefox	Safari	Opera	IE8	Chrome
E:hover	√	√	√	√	√
E:active	√	√	√	x	√
E:focus	√	√	√	√	√
E:enable	√	√	√	x	√
E:disable	√	√	√	x	√
E:read-only	√	x	√	x	x
E:read-write	√	x	√	x	x
E:checked	√	√	√	x	√
E:default	√	x	x	x	x
E:indeterminate	√	√	x	√	√
E:selection	√	√	√	x	√