html三大样式选择器 -

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>选择器的应用实例</title>
    <style>
        /* 1. 基本选择器 */
        /* 1.1 便签选择器 */
        dd {
            color: red;
        }
        /* 1.2 属性选择器 */
        /* .attr {
            color: lightcoral;
        } */
        dd[class=attr] {
            color: lightpink;
        }
        /* 2. 上下文选择器 */
        /* 2.1 父子 */
        .list > .item {
            border: thin solid;
        }
        /* 2.2 后代 */
        .list2 .item2 {
            color: red;
        }
        /* 2.3 兄弟(只选取第一个) */
        .list3 .item3.brother + .item3 {
            background-color: red;
        }
        /* 2.4 同级(除了当前元素的所有同级) */
        .list4 .item4.brother ~ .item4 {
            background-color: red;
        }
        /* 3. 结构伪类选择器 */
        /* 匹配第一个 */
        .order > :nth-child(0n + 1) {
            background-color: red;
        }
        /* 匹配第三个 */
        /* .order > :nth-child(0n + 3) {
            background-color: red;
        } */
        /* 0乘以任何数得0所以 0n+1 === 1 */
        /* .order > :nth-child(1) {
            background-color: blue;
        } */
        /* a = 1 匹配一组 */
        .order > :nth-child(1n +3) {
            background-color: red;
        }
        /* 只获取前三个 */
        /* a = -1:反向匹配 */
        .order > :nth-child(-n + 3) {
            background-color: yellow;
        }
        /* 2n 偶数位匹配 */
        .order > :nth-child(2n) {
            background-color: gray;
        }
        /* 2n+1 奇数匹配 */
        /* .order > :nth-child(2n + 1) {
            background-color: gray;
        } */
        /* 匹配首个 */
        .order > :first-child {
            background-color: blueviolet;
        }
        /* 匹配最后一个 */
        .order > :last-child {
            background-color: blueviolet;
        }
        /* 匹配倒数2个 */
        .order > :nth-last-child(-1n + 2) {
            background-color: orange;
        }
        /* 4.状态伪类选择器 */
        fieldset {
            display: inline-grid;
            gap : 1em;
        }
        /* 4.1 鼠标悬停 提交按钮变灰色*/
        /* 4.2 有效控件 */
        fieldset :enabled {
            border-radius: 5px;
        }
        /* 4.3 禁用控件 邀请码*/
        fieldset :disabled {
            background-color: brown;
        }
        /* 4.4 选中控件 记住我*/
        fieldset :checked + label {
            color: red;
        }
        /* 4.5 必选控件 用户名*/
        fieldset :required {
            border-color: red;
        }
        /* 4.6 焦点控件 */
        fieldset button:hover {
            cursor : pointer;
            background-color: beige;
        }
    </style>
</head>
<body>
    <section>
        <dl>
            <dt><h2>1. 基本选择器：</h2></dt>
            <dd>1.1 标签选择器</dd>
            <dd class="attr">1.2 属性选择器</dd>
        </dl>
        <h2>2. 上下文选择器：</h2>
        <h3>2.1 父子 ></h3>
        <ul class="list">
            <li class="item">itme1</li>
            <li class="item">itme2</li>
            <li class="item">itme3</li>
            <li class="item">itme4</li>
        </ul>
        <h3>2.2 后代 ' '(空格)</h3>
        <ul class="list2">
            <li class="item2">itme1</li>
            <li class="item2">
                itme2
                <ul>
                    <li class="item">
                        item2-1
                        <ul>
                            <li class="item">item2-1-1</li>
                            <li class="item">item2-1-2</li>
                            <li class="item">item2-1-3</li>
                          </ul>
                    </li>
                    <li class="item">item2-2</li>
                    <li class="item">item2-3</li>
                  </ul>
            </li>
            <li class="item2">itme3</li>
            <li class="item2">itme4</li>
        </ul>
        <h3>2.3 兄弟 +</h3>
        <ul class="list3">
            <li class="item3 brother">itme1</li>
            <li class="item3">itme2</li>
            <li class="item3">itme3</li>
            <li class="item3">itme4</li>
        </ul>
        <h3>2.4 同级 ~</h3>
        <ul class="list4">
            <li class="item4 brother">itme1</li>
            <li class="item4">itme2</li>
            <li class="item4">itme3</li>
            <li class="item4">itme4</li>
        </ul>
        <h2>3. 结构伪类选择器：</h2>
        <ol class="order">
            <li class="item">item1</li>
            <li class="item">item2</li>
            <li class="item">item3</li>
            <li class="item">item4</li>
            <li class="item">item5</li>
            <li class="item">item6</li>
        </ol>
        <h2>4. 状态伪类选择器</h2>
        <fieldset>
            <legend>用户注册</legend>
            <input type="text" id="username" name="username" placeholder="用户名" required />
            <input type="email" id="email" name="email" placeholder="邮箱" />
            <input type="password" id="password" name="password" placeholder="密码" required />
            <input type="text" id="vcode" name="vcode" placeholder="邀请码" disabled />
            <section>
                <input type="checkbox" id="rem" name="remember" checked="checked" />
                <label for="rem">记住我</label>
            </section>
            <button type="button">提交</button>
        </fieldset>
    </section>
</body>
</html>