溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×

忘記密碼？

登錄注冊×

獲取短信驗(yàn)證碼

其他方式登錄

點(diǎn)擊登錄注冊即表示同意《億速云用戶服務(wù)條款》

用戶登錄×

賬戶密碼登錄

請使用微信掃描上方二維碼

使用幫助

請求超時！

請點(diǎn)擊重新獲取二維碼

css中的UI狀態(tài)偽類選擇器怎么使用

發(fā)布時間：2022-08-03 16:16:50 來源：億速云閱讀：141 作者：iii 欄目：web開發(fā)

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

css中的UI狀態(tài)偽類選擇器怎么使用

UI狀態(tài)偽類選擇器，用于選擇處于某種狀態(tài)下的UI元素，主要用于HTML表單上，根據(jù)表單元素的不同狀態(tài)，定義不同的樣式，來增強(qiáng)用戶體驗(yàn)。

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

表單元素的狀態(tài)包括獲得焦點(diǎn)、失去焦點(diǎn)、選中、未選中、可用、不可用、有效、無效、必填、選填、只讀等等。

UI狀態(tài)偽類選擇器
選擇器	功能描述	版本
E:focused	選擇表單中獲得焦點(diǎn)的元素	3
E:checked	選擇表單中被選中的radio或者checkbox元素	3
E:enabled	選擇表單中可用的元素	3
E:disabled	選擇表單中不可用（即被禁用）的元素	3
E:valid	選擇表單中填寫的內(nèi)容符合要求的元素	3
E:invalid	選擇表單中填寫的內(nèi)容不符合要求的元素，如非法的URL或E-Mail，或與 pattern 屬性給出的模式不匹配	3
E:in-range	選擇表單中輸入的數(shù)字在有效范圍內(nèi)的元素	3
E:out-of-range	選擇表單中輸入的數(shù)字超出有效范圍的元素	3
E:required	選擇表單中必填的元素	3
E:optional	選擇表單中允許使用required屬性，且未指定為required的元素	3
E:read-only	選擇表單中狀態(tài)為只讀的元素	3
E:read-write	選擇表單中狀態(tài)為非只讀的元素	3
E:default	選擇表單中默認(rèn)處于選取狀態(tài)的單選框或復(fù)選框，即使用戶將該單選框或復(fù)選框控件的選取狀態(tài)設(shè)定為非選取狀態(tài)，E:default選擇器中指定的樣式仍然有效	3
E:indeterminate	選擇器表單中一組單選框中沒有任何一個單選框被選取時整組單選框的樣式，如果用戶選取了其中任何一個單選框，則該樣式被取消指定	3

1、E:hover選擇器

用來指定當(dāng)鼠標(biāo)指針移動到元素上時元素所使用的樣式

使用方法：

<元素>: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=''>這是一個鏈接</a>
    <a href=''>這是另一個鏈接</a>
</body>
</html>

運(yùn)行結(jié)果如下圖所示：

css中的UI狀態(tài)偽類選擇器怎么使用

2、E:active選擇器

:active：定義點(diǎn)擊鏈接時的樣式。

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

<!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=''>這是一個鏈接</a>
    <a href=''>這是另一個鏈接</a>
</body>
</html>

運(yùn)行結(jié)果如下圖所示：

css中的UI狀態(tài)偽類選擇器怎么使用

3、E:link選擇器

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

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

<!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=''>這是一個鏈接</a>
    <a href=''>這是另一個鏈接</a>
</body>
</html>

運(yùn)行結(jié)果如下圖所示：

css中的UI狀態(tài)偽類選擇器怎么使用

4、E:visited選擇器

:visited：定義已經(jīng)訪問過鏈接的樣式；

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

<!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=''>這是一個鏈接</a>
    <a href=''>這是另一個鏈接</a>
</body>
</html>

運(yùn)行結(jié)果如下圖所示：

css中的UI狀態(tài)偽類選擇器怎么使用

5、E:focus選擇器

:focus：用來指定元素獲得光標(biāo)聚焦點(diǎn)使用的樣式

示例代碼如下：

<!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>
<h2>選擇器E:hover、E:active和E:focus</h2>
<form>
姓名：<input type="text" placeholder="請輸入姓名">
<br />
<br />
密碼：<input type="password" placeholder="請輸入密碼"></form>
</body>
</html>

css中的UI狀態(tài)偽類選擇器怎么使用

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

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

<!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>
<h2>E:enabled偽類選擇器與E:disabled偽類選擇器</h2>
<form>
姓名：<input type="text" placeholder="請輸入姓名" disabled>
<br />
<br />
學(xué)校：<input type="text" placeholder="請輸入學(xué)校"></form>
</body>
</html>

css中的UI狀態(tài)偽類選擇器怎么使用

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

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

<!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>
<h2>read-only偽類選擇器與E:read-write偽類選擇器</h2>
<form>
姓名：<input type="text" placeholder="請輸入姓名" value="winson" readonly>
<br />
<br />
學(xué)校：<input type="text" placeholder="請輸入學(xué)校"></form>
</body>
</html>

css中的UI狀態(tài)偽類選擇器怎么使用

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checked偽類選擇器</title>
<style>
input[type="checkbox"]:checked{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h2>checked偽類選擇器</h2>
<form>
房屋狀態(tài)： <input type="checkbox">水 <input type="checkbox">電 <input type="checkbox">天然氣 <input type="checkbox">寬帶</form>
</body>
</html>

css中的UI狀態(tài)偽類選擇器怎么使用

默認(rèn)的選擇項(xiàng)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>default偽類選擇器</title>
<style>
input[type="checkbox"]:default{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h2>default偽類選擇器</h2>
<form>
房屋狀態(tài)： <input type="checkbox" checked>水 <input type="checkbox">電 <input type="checkbox">天然氣 <input type="checkbox">寬帶</form>
</body>
</html>

css中的UI狀態(tài)偽類選擇器怎么使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>indeterminate偽類選擇器</title>
<style>
input[type="radio"]:indeterminate{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h2>indeterminate偽類選擇器</h2>
<form>
性別： <input type="radio">男 <input type="radio">女</form>
</body>
</html>

css中的UI狀態(tài)偽類選擇器怎么使用

9、偽類選擇器E::selection

E:selection偽類選擇器用來指定當(dāng)元素處于選中狀態(tài)時的樣式。

<!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>
<h2>偽類選擇器E::selection</h2>
<input type="text" placeholder="文本">
</body>
</html>

css中的UI狀態(tài)偽類選擇器怎么使用

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

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

<!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>
<h2>E:invalid偽類選擇器與E:valid偽類選擇器</h2>
<form>
<input type="email" placeholder="請輸入郵箱"></form>
</body>
</html>

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

1)、E:required偽類選擇器用來指定允許使用required屬性，而且已經(jīng)指定了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>
		<h2>E:required偽類選擇器與E:optional偽類選擇器</h2>
		<form>
			姓名：<input type="text" placeholder="請輸入姓名" required>
			<br />
			<br />
			學(xué)校：<input type="text" placeholder="請輸入學(xué)校"></form>
	</body>
</html>

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

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

<!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>
<h2>E:in-range偽類選擇器與E:out-of-range偽類選擇器</h2><input type="number" min="0" max="100" value="0">
</body>
</html>

css中的UI狀態(tài)偽類選擇器怎么使用

各UI元素狀態(tài)偽類選擇器受瀏覽器的支持情況

選擇器	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	√

關(guān)于“css中的UI狀態(tài)偽類選擇器怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。

向AI問一下細(xì)節(jié)

推薦閱讀：

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

上一篇新聞：
React報錯解決之ref返回undefined或null怎么解決
下一篇新聞：
CSS盒子模型及box-sizing屬性實(shí)例分析

猜你喜歡

AI
助
手

產(chǎn)品服務(wù)

地區(qū)劃分

專題活動

幫助支持

關(guān)于我們

售后咨詢

7*24小時在線電話：400-100-2938

7*24小時在線 QQ：800811969

關(guān)注億速云

億速云公眾號

手機(jī)網(wǎng)站二維碼

<tfoot id="sq35z"><object id="sq35z"></object></tfoot>

<table id="sq35z"><nav id="sq35z"></nav></table>

<u id="sq35z"><ol id="sq35z"><abbr id="sq35z"></abbr></ol></u>

<fieldset id="sq35z"></fieldset>