用户注册表单与css选择器 -

一.用户注册表

输入:

<h2>用户注册</h2>
  <form action="check.php" method="POST" style="display: grid; gap: 0.5em">
    <fieldset>
      <legend>必填项</legend>
      <div>
        <label for="username">账号:</label>
        <input
          type="text"
          id="username"
          name="username"
          placeholder="请输入用户名或者手机号"
          required
          autofocus
          value="17746943541"
        />
      </div>
      <div>
        <label for="psw">密码:</label>
        <input type="password" id="psw" name="psw" placeholder="请输入不少于8位密码" required />
        <button type="button" onclick="document.querySelector('#psw').type='text'">显示密码</button>
      </div>
      <div>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" placeholder="295885@email.com" required />
      </div>
      <div>
        <label for="verification">验证:</label>
        <input type="verification" id="verification" name="verification" placeholder="请输入验证码" required />
      </div>
    </fieldset>
    <fieldset>
      <legend>选填项</legend>
      <div>
        <label for="secret">性别:</label>
        <input type="radio" name="gender" id="male" value="male" /><label for="male">男</label>
        <input type="radio" name="gender" id="female" value="female" /><label for="female">女</label>
        <input type="radio" name="gender" id="secret" value="secret" checked /><label for="secret">保密</label>
      </div>
      <div>
        <label>爱好:</label>
        <input type="checkbox" name="hobby[]" id="game" checked /><label for="game">游戏</label>
        <input type="checkbox" name="hobby[]" id="basketball" /><label for="basketball">篮球</label>
        <input type="checkbox" name="hobby[]" id="game" checked /><label for="game">游戏</label>
        <input type="checkbox" name="hobby[]" id="swim" /><label for="swim">游泳</label>
      </div>
      <div>
        <label>居住城市:</label>
        <select name="site">
          <option value="1">北京</option>
          <option value="2" selected>成都</option>
          <option value="3">上海</option>
          <option value="4">北京</option>
          <option value="5">深圳</option>
        </select>
      </div>
      <div>
        <label for="">居住地址:</label>
        <input type="search" name="search" list="keywords" />
        <datalist id="keywords">
          <option value="锦江区">锦江区</option>
          <option value="金牛区">金牛区</option>
          <option value="青羊区">青羊区</option>
        </datalist>
      </div>
    </fieldset>
    <button>注册</button>
    <button>登录</button>
  </form>

输出：

二.选择器

1.选择器权重

1.1. 三大通用元素：style，id，class，适用于几乎所有的元素；
1.2. 优先级属性：!important > style属性 > id > class > tag(tag是标签)

!important 最优先级，一般用于样式的调试，很少用；class 比较常用。

1.3. id ， class ， tag 默认权重关系，初始默认都为0 ， 0 ， 0。

id class tag

0 0 0

百位十位个位

id	class	tag
0	0	0
百位	十位	个位

权重对比：

输入：

权重：0,0,1

<h2 id="a" class="b">选择器权重计算</h2>
<style>
h2 {
color: red;
background-color: yellow;
    }

输出：

输入：

权重：0,0,2

<h2 id="a" class="b">选择器权重计算</h2>
<style>
h2 {
color: red;
background-color: yellow;
    }
body h2 {
background-color: violet;
    }

输出：

输入：

权重：0,1,0

<h2 id="a" class="b">选择器权重计算</h2>
<style>
h2 {
color: red;
background-color: yellow;
    }
body h2 {
background-color: violet;
    }
.b {
background-color: teal;
    }

输出：

输入：

权重：0,1,1

<h2 id="a" class="b">选择器权重计算</h2>
<style>
h2 {
color: red;
background-color: yellow;
    }
body h2 {
background-color: violet;
    }
.b {
background-color: teal;
    }
h2.b {
background-color: tomato;
    }

输出：

输入：

权重：1,0,0

<h2 id="a" class="b">选择器权重计算</h2>
<style>
h2 {
color: red;
background-color: yellow;
    }
body h2 {
background-color: violet;
    }
.b {
background-color: teal;
    }
h2.b {
background-color: tomato;
    }
#a {
background-color: cyan;
    }

输出：

输入：

最大优先级：!important

<h2 id="a" class="b">选择器权重计算</h2>
<style>
h2 {
color: red;
background-color: yellow !important;
    }
body h2 {
background-color: violet;
    }
.b {
background-color: teal;
    }
h2.b {
background-color: tomato;
    }
#a {
background-color: cyan;
    }

输出：

2.上下文选择器

子元素选择用大于号“>”；
后代元选择用空格“ ”；
相邻元素选择用加号“+”；
选中全部兄弟元素用波浪号“~”；

选择不同的元素

输入：

<ul class="list">
<li>demo1</li>
<liclass="demo">demo2</li>
<li>demo3
<ul>
<li>demo01</li>
<li>demo02</li>
<li>demo03</li>
</ul>
</li>
<li>demo4</li>
<li>demo5</li>
</ul>

输出：

给子元素添加边框

输入：

<style>
.list > li {
border: 1px solid #000;
    }
</style>

输出:
“>”只是给子元素添加边框，后代元素不添加

添加边框

输入：

<style>
.list li {
border: 1px solid #000;
    }
</style>

输出：
空格符号选择后代元素一起添加表格

选择元素

输入：

<style>
.list > li {
border: 1px solid #000;
    }
.list li {
border: 1px solid #000;
    }
.list .demo {
background-color: chocolate;
    }
</style>

输出：
选中当前元素

输入：

<style>
.list > li {
border: 1px solid #000;
    }
.list li {
border: 1px solid #000;
    }
.list .demo + * {
background-color: chocolate;
    }
</style>

输出：
加上加号就是选中当前元素的相邻的下一个元素

输入：

<style>
.list > li {
border: 1px solid #000;
    }
.list li {
border: 1px solid #000;
    }
.list .demo ~ * {
background-color: cyan;
    }
</style>

输出：
加上波浪号就是选中当前元素的所有兄弟元素