用户注册表单与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
百位	十位	个位

权重对比：

• 输入：

  权重：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>

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