HTML5中CSS3的状态伪类选择器

来源：互联网发布：java抓取淘宝商品信息编辑：程序博客网时间：2024/06/13 19:51

状态伪类选择器：

E:checked

匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

E:disabled

匹配用户界面上处于禁用状态的元素E。

E:enabled

匹配用户界面上处于可用状态的元素E。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        input:checked + span{            color: red;        }        input[type="text"]:enabled{            border: 1px solid green;            background: #fff;            color: red;        }        input[type="text"]:disabled{            border: 1px solid red;            background: #fff;            color: #84fff7;        }    </style>    <title>状态伪类选择器</title></head><body><form action="">    <label for="a">        <input id="a" type="radio" name="sex" value="1">        <span>男</span>    </label>    <label for="b">        <input id="b" type="radio" name="sex" value="2">        <span>女</span>    </label>    <br>    <label for="c">        <span>姓名:</span>        <input id="c" type="text">    </label>    <br>    <label for="d">        <span>地址:</span>        <input id="d" type="text" disabled>    </label></form></body></html>

0 0