Form注册表单 选择器权重计算及上下文选择器

(一)Form用户注册表单

//css样式
body {
    background-image: url(xmemphis-colorful.webp);
}
.register {
    width: 580px;
    height: 380px;
    padding: 20px;
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -290px;
    border: 2px dotted pink;
    border-radius: 5px;
}
.register form {
    display: grid;
    gap: 1em;
}
.register form fieldset {
    display: grid;
    gap: 0.8em;
}
.register form > div:last-of-type {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
}

        <div class="register">
            <form action="register.php" method="GET">
                <fieldset>
                    <legend>必填项</legend>
                    <div>
                        <label for="account">用户名：</label>
                        <input type="text" id="account" name="account" placeholder="用户名不得小于 3 个字符" required autofocus />
                    </div>
                    <div>
                        <label for="password">密码：</label>
                        <input type="password" id="password" name="password" placeholder="输入不少于8个字符的密码" required />
                        <button type="button" onclick="document.querySelector('#password').type='text'">显示密码</button>
                    </div>
                    <div>
                        <label for="pswConfirm">确认密码：</label>
                        <input type="password" id="pswConfirm" name="pswConfirm" placeholder="重复输入密码" required />
                        <button type="button" onclick="document.querySelector('#pswConfirm').type='text'">显示密码</button>
                    </div>
                    <div>
                        <label for="email">邮箱：</label>
                        <input type="email" id="email" name="email" placeholder="[e-mail]" required />
                    </div>
                </fieldset>
                <!-- 单选按钮 -->
                <div>
                    <label for="secret">性别：</label>
                    <input type="radio" name="gender" id="male" />
                    <label for="male">男</label>
                    <input type="radio" name="gender" id="female" />
                    <label for="female">女</label>
                    <input type="radio" name="gender" id="secret" />
                    <label for="secret">保密</label>
                </div>
                <!-- 复选框 -->
                <div>
                    <label for="">用户订阅</label>
                    <input type="checkbox" name="subscribe[]" id="post" value="post" checked />
                    <label for="post">公告</label>
                    <input type="checkbox" name="subscribe[]" id="chat" value="chat" checked />
                    <label for="chat">聊天吹水</label>
                    <input type="checkbox" name="subscribe[]" id="game" value="game" />
                    <label for="game">游戏攻略</label>
                    <input type="checkbox" name="subscribe[]" id="movie" value="movie" />
                    <label for="movie">影音视听</label>
                    <input type="checkbox" name="subscribe[]" id="news" value="news" />
                    <label for="news">小道资讯</label>
                    <input type="checkbox" name="subscribe[]" id="other" value="other" />
                    <label for="other">其他</label>
                </div>
                <!-- 下拉列表 -->
                <div>
                    <label for="">密保问题</label>
                    <select name="security" id="">
                        <option value="sec">安全问题(未设置请忽略)</option>
                        <option value="city">你出生的城市是？</option>
                        <option value="birthday">你的生日是几号？</option>
                        <option value="school">你毕业的大学是？</option>
                    </select>
                </div>
                <!-- 搜索关键字 -->
                <div>
                    <label for="">搜索关键词</label>
                    <input type="search" name="search" list="keywords" />
                    <datalist id="keywords">
                        <option value="html">html</option>
                        <option value="css">css</option>
                        <option value="javascript">javascript</option>
                    </datalist>
                </div>
                <div>
                    <button>注册</button>
                    <button type="reset">重置</button>
                </div>
            </form>
        </div>

效果预览：

(二)选择器权重的计算

1. 选择器之间的优先级：
   !important > style > id > class > tag

2.id > class > tag 之间的组合应用

数值越大优先级越高，优先级高覆盖优先级低的。
为了便于理解，可将这三个标签看作百、十 、个位来进行计算。
以下面<h3>标签为例进行计算：

    <h3 id="a" class="b">权重选择器</h3>

样式1

    h3{
    background-color: red;
    }

样式2

    body h3 {
    background-color: blue;
    }

样式3

    .b{
    background-color: pink;
    }

样式4

    h3.b {
    background-color: green;
    }

样式5

    #a {
    background-color: green;
    }

计算过程及结果：

序号	id/ 百	class/ 十	tag /个	结果
1	0	0	1	001
2	0	0	1+1	002
3	0	1	0	010
4	0	1	1	011
5	1	0	0	100

(三)上下文选择器

• 后代选择器(以空格 分隔)
• 子元素选择器(以大于> 号分隔）
• 相邻兄弟选择器（以加号+分隔）
• 普通兄弟选择器（以波浪号～分隔）

        <ul class="list">
            <li>item1</li>
            <li>item2</li>
            <li>
                item3
                <!-- <ul class="list2">
                    <li>item3-1</li>
                    <li>item3-2</li>
                    <li>item3-3</li>
                </ul> -->
            </li>
            <li class="item">item4</li>
            <li>item5</li>
            <li>item6</li>
            <li>item7</li>
            <li>item8</li>
        </ul>
        <style>
            /* 子元素：>*/
            .list > li {
                border: 1px dashed blue;
            }
            /* 后代选择器:空格 */
            .list li {
                border: 1px dashed red;
            }
            /* 相邻选择器：+ 下一个 */
            .list .item + li {
                background-color: pink;
            }
            /* 兄弟选择器：~ */
            .list .item ~ * {
                background-color: cyan;
            }
        </style>