css3新增伪类css3新增伪类 :empty 选择空标签 :focus 选择当前获得焦点的表单元素 :enabled

css3新增伪类

:empty 选择空标签

:focus 选择当前获得焦点的表单元素

:enabled 选择当前有效的表单元素

:disabled 选择当前无效的表单元素

:checked 选择当前已经勾选的单选按钮或者复选框

:root 选择根元素，即html 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .para {
            width:100px;
            height:100px;
            border: 1px solid #000;
        }
        .para:empty {
            background-color:red;
        }
        input:focus {
            background-color:red;
        }
        input:disabled {
            border: 1px solid #000;
        }
        input:enabled {
            border: 3px solid #000;
        }
        input:checked+span {
            color:red;
        }
        :root {
            font-size:50px;
        }
        
    </style>
</head>
<body>
    <p class="para"></p>
    <p class="para"></p>
    <p class="para">123</p>
    <p class="para"> </p>
    <p>
        <input type="text">
        <input type="text" disabled>
        <input type="text" disabled>
        <input type="text">
    </p>
    <p>
        <input type="checkbox"><span>ai</span>
        <input type="checkbox"><span>123</span>
        <input type="checkbox"><span>456</span>
        <input type="checkbox"><span>ni</span>
    </p>
</body>
</html>