用户注册表单、css选择器权重、上下文选择器

1.用户注册表单

<h2>用户注册</h2>
<form action="test.php" method="POST">
  <fieldset>
    <legend>必填项</legend>
    <div>
      <label for="username"
        >账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号 ：</label
      >
      <!-- 可通过value设置默认值，但会把placeholder覆盖 -->
      <input
        type="text"
        name="username"
        id="username"
        placeholder="账号6-10位"
        maxlength="10"
        minlength="6"
        required
        autofocus
      />
    </div>
    <div>
      <label for="password"
        >密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码 ：</label
      >
      <input
        type="password"
        name="password"
        id="password"
        placeholder="密码6-10位"
        maxlength="10"
        minlength="6"
        required
      />
    </div>
    <div>
      <label for="con-pwd">确认密码：</label>
      <input
        type="password"
        name="con-pwd"
        id="con-pwd"
        placeholder="密码6-10位"
        maxlength="10"
        minlength="6"
        required
      />
    </div>
  </fieldset>
  <fieldset>
    <legend>基本信息</legend>
    <div>
      <label for="male">性别：</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="sport" value="sport" />
      <label for="sport">运动</label>
      <input type="checkbox" name="hobby[]" id="study" value="study" />
      <label for="study">学习</label>
      <input type="checkbox" name="hobby[]" id="sing" value="sing" />
      <label for="sing">唱歌</label>
    </div>
    <div>
      <label>年龄：</label>
      <select name="年龄">
        <option value="child">0-18岁</option>
        <option value="man">19-60岁</option>
        <option value="old">60岁以上</option>
      </select>
    </div>
    <div>
      <label>性格标签：</label>
      <!-- 通过list属性与datalist的id属性进行绑定 -->
      <input type="search" name="search" list="keywords" />
      <datalist id="keywords">
        <option value="happy">happy</option>
        <option value="sad">sad</option>
        <option value="love">love</option>
        <option value="angry">angry</option>
      </datalist>
    </div>
  </fieldset>
  <!-- button标签如果不声明type，默认就是submit -->
  <button>提交</button>
  <button type="reset">重置</button>
</form>

代码运行结果：

2.CSS选择器权重

• 三大通用属性:style、id、class，几乎所有的元素都可以使用的属性。

• CSS选择器优先级为：

  !important > style > id > class > tag(标签)

• CSS选择器权重

选择器	!important	style	id	class	tag
权重值	10000	1000	100	10	1

• 选择器权重计算案例

<!-- 权重计算案例1： -->
<div style="background-color: seashell">行内样式权重为1000</div>
<!-- 权重计算案例2： -->
<style>
    div.a {
    background-color: #fefefe;
    }
</style>
<div class="a">类选择器+标签选择器权重为10+1=11</div>
<!-- 权重计算案例3： -->
<style>
    .a #b {
    background-color: #fefefe;
    }
</style>
<div class="a">
    <div id="b">类选择器+id选择器权重为100+10=110</div>
</div>

3上下文选择器

3.1 后代选择器

<style>
    .parent li {
    border: 1px solid gold;
    }
</style>
<ul class="parent">
    <li>item1</li>
    <li>item2</li>
    <li>
    item3
    <ul>
        <li>item3_1</li>
        <li>item3_2</li>
        <li>item3_3</li>
    </ul>
    </li>
    <li>item4</li>
    <li>item5</li>
</ul>

代码运行结果：

css样式对所有的后代元素li标签起作用，包括子元素、孙子元素。

3.2 子元素选择器

<style>
    .parent > li {
    border: 1px solid gold;
    }
</style>
<ul class="parent">
    <li>item1</li>
    <li>item2</li>
    <li>
    item3
    <ul>
        <li>item3_1</li>
        <li>item3_2</li>
        <li>item3_3</li>
    </ul>
    </li>
    <li>item4</li>
    <li>item5</li>
</ul>

代码运行结果：

css样式对作为子元素的li标签起作用。

3.3 相邻兄弟选择器

<style>
    .demo + * {
    background-color: #ccc;
    }
</style>
<ul class="parent">
    <li>item1</li>
    <li class="demo">item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

代码运行结果：

css样式对相邻的兄弟元素起作用

3.4 所有兄弟选择器

<style>
    .demo ~ * {
    background-color: #ccc;
    }
</style>
<ul class="parent">
    <li>item1</li>
    <li class="demo">item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

代码运行结果：