零基础学习CSS(6)——:enabled、:disabled、:checked、:requeired、:optional、:defaul

Dragon水魅

发布于 2026-01-23 18:59:53

860

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

:enabled 选择器：https://man.ilovefishc.com/pageCSS3/dotenabled.html :disabled 选择器：https://man.ilovefishc.com/pageCSS3/dotDisabled.html :checked 选择器：https://man.ilovefishc.com/pageCSS3/dotChecked.html :requeired 选择器：https://man.ilovefishc.com/pageCSS3/dotRequired.html :optional 选择器：https://man.ilovefishc.com/pageCSS3/dotOptional.html :default 选择器：https://man.ilovefishc.com/pageCSS3/dotDefault.html

:enabled 选择器和 disabled 选择器用于匹配启用和禁用的元素（大多在表单中匹配）：

<!DOCTYPE html>
<html>
<head>
    <title>伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 设置禁用与可用的样式 */
        :enabled {
            outline: 1px solid green;;
        }

        :disabled {
            background-color: #dddddd;
        }
    </style>
</head>
<body>
    <form>
        <p>
            <label for="enabled">可用：</label>
            <input type="text" name="enabled">
        </p> 
        <p>     
            <label for="disabled">禁用：</label>
            <input type="text" name="disabled" disabled>
        </p> 
        <button>可用按钮</button>
        <button disabled>不可用按钮</button>
    </form>
</body>
</html>

:check 选择器用于修改选中表单元素（单选、多选、下拉）的样式：

<!DOCTYPE html>
<html>
<head>
    <title>伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
    /* 设置表单元素的选项被选中时的样式 */
        :checked {
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
    <form>
       <input type="radio" name="gender" value="male"><span>男人</span><br>
       <input type="radio" name="gender" value="femele"><span>女人</span><br>
       <hr>
       <input type="checkbox" name="fruit" value="egg"><span>鸡蛋</span><br>
       <input type="checkbox" name="fruit" value="apple"><span>苹果</span><br>
       <input type="checkbox" name="fruit" value="banana"><span>香蕉</span><br>
    </form>
</body>
</html>

:required 选择器和 :optional 选择器用于设置必填和可选的样式：

<!DOCTYPE html>
<html>
<head>
    <title>伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
    /* 设置必填和可选的样式 */
        :required {
            outline: 3px solid red;
        }
        :optional {
            outline: 3px solid green;;
        }
    </style>
</head>
<body>
    <form>
        <p>
            <label for="required">必填：</label>
            <input type="text" name="required" required>
        </p>
        <p>
            <label for="potional">可选：</label>
            <input type="text" name="potional">
        </p>
        <button type="submit">提交</button>
    </form>
</body>
</html>

:default 选择器用于修改默认元素的样式：

<!DOCTYPE html>
<html>
<head>
    <title>伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
    /* 设置默认元素的样式 */
        :default {
            outline: 3px solid red;
        }
    </style>
</head>
<body>
    <form>
        <p>
            <label for="required">必填：</label>
            <input type="text" name="required" required>
        </p>
        <p>
            <label for="potional">可选：</label>
            <input type="text" name="potional">
        </p>
        <button type="submit">提交</button>
    </form>
</body>
</html>