CSS 新增UI元素狀態(tài)偽裝

提問人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-19

CSS3中新增的UI元素狀態(tài)偽類如下。

1.:checked

使用:checked選擇器匹配每個(gè)已被選中的input元素，只用于單選按鈕和復(fù)選框。

2.:enabled

使用:enabled選擇器匹配每個(gè)已啟用的元素，大多用在表單元素上。

【例題】為所有已啟用的input元素設(shè)置背景色

代碼如下：

<!DOCTYPE html>

<html>

<head>

<style>

input:enabled

{

background:#ffff00;

}

input:disabled

{

background:#dddddd;

}

</style>

</head>

<body>

First name: <input type="text" value="Mickey" /><br>

Last name: <input type="text" value="Mouse" /><br>

Country: <input type="text" disabled="disabled" value="Disneyland" /><br>

Password: <input type="password" name="password" /><br>

<input type="radio" value="female" name="gender" /> Female<br>

<input type="checkbox" value="Car" /> I have a car

</form>

</body>

</html>

3.:disabled

使用:disabled選擇器選取所有禁用的表單元素，它與:enabled用法類似，這里不再舉例。

4.::selection

使用：:selection選擇器匹配被用戶選取的選取是部分。只能向 ::selection選擇器應(yīng)用少量的CSS屬性，包括color、background、cursor、outline。

相關(guān)視頻回答

回復(fù)(0)