Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表单元素、选择器权重以及上下文选择器实战
Blogger Information
Blog 19
fans 0
comment 0
visits 13231
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表单元素、选择器权重以及上下文选择器实战
王浩
Original
413 people have browsed it
  1. 作业内容：
  2. 1. 制作一个用户注册表单,尽可能将常用控件都用一遍; 
  3. 2. 实例演示选择器权重的计算过程; 
  4. 3. 实例演示上下文选择器

1. 这是一个常用的表单元素示例页面

具体代码实现如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CH">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <title>用户注册</title>
  8.         <style>
  9.             form {
  10.                 display: grid;
  11.                 gap: 0.5em;
  12.                 margin-left: 30%;
  13.                 margin-right: 30%;
  14.             }
  15.             div {
  16.                 padding: 5px;
  17.                 text-align: center;
  18.             }
  19.             span {
  20.                 color: red;
  21.             }
  22.         </style>
  23.     </head>
  24.     <body>
  25.         <form action="login.php" method="post">
  26.             <fieldset>
  27.                 <legend>用户注册（带*号为必填项）</legend>
  28.                 <!-- 普通文本输入框 -->
  29.                 <div>
  30.                     <label for="username">帐号：</label>
  31.                     <input
  32.                         type="text"
  33.                         name="username"
  34.                         id="username"
  35.                         placeholder="请填写注册的用户名"
  36.                         required
  37.                         autofocus
  38.                     /><span>*</span>
  39.                 </div>
  40.                 <!-- 隐藏密码输入框 -->
  41.                 <div>
  42.                     <label for="passwd">密码：</label>
  43.                     <input
  44.                         type="password"
  45.                         name="passwd"
  46.                         id="passwd"
  47.                         placeholder="请填写密码"
  48.                         required
  49.                     /><span>*</span>
  50.                 </div>
  51.                 <!-- 带有邮箱验证的输入框 -->
  52.                 <div>
  53.                     <label for="email">邮箱：</label>
  54.                     <input type="email" name="email" id="email" required /><span
  55.                         >*</span
  56.                     >
  57.                 </div>
  58.                 <!-- 单选框 -->
  59.                 <div>
  60.                     <label for="secret">性别：</label>
  61.                     <input type="radio" name="sex" id="male" />
  62.                     <label for="male">帅哥</label>
  63.                     <input type="radio" name="sex" id="female" />
  64.                     <label for="female">美女</label>
  65.                     <input type="radio" name="sex" id="secret" checked />
  66.                     <label for="secret">保密</label>
  67.                 </div>
  68.                 <!-- 多选框 -->
  69.                 <div>
  70.                     <label>想学：</label>
  71.                     <input name="study[]" id="html" type="checkbox" /><label
  72.                         for="html"
  73.                         >HTML</label
  74.                     >
  75.                     <input name="study[]" id="css" type="checkbox" /><label
  76.                         for="css"
  77.                         >CSS</label
  78.                     >
  79.                     <input name="study[]" id="php" type="checkbox" /><label
  80.                         for="php"
  81.                         >PHP</label
  82.                     >
  83.                 </div>
  84.                 <!-- 下拉菜单 -->
  85.                 <div>
  86.                     <label for="occupation">职业：</label>
  87.                     <select name="occupation" id="occupation">
  88.                         <option value="0">请选择您的职业</option>
  89.                         <option value="1">上班族</option>
  90.                         <option value="2">公务人员</option>
  91.                         <option value="3">创业者</option>
  92.                         <option value="4">无业</option>
  93.                     </select>
  94.                 </div>
  95.                 <!-- 自定义下拉菜单 -->
  96.                 <div>
  97.                     <label for="message">备注：</label>
  98.                     <input type="search" id="message" name="message" list="data" />
  99.                     <datalist id="data">
  100.                         <option value="我每天晚上8点后才有时间上课">
  101.                             我每天晚上8点后才有时间上课
  102.                         </option>
  103.                         <option value="我只有周末有时间上课">
  104.                             我只有周末有时间上课
  105.                         </option>
  106.                         <option value="我任何时候都有时间上课">
  107.                             我任何时候都有时间上课
  108.                         </option>
  109.                     </datalist>
  110.                 </div>
  111.             </fieldset>
  112.             <button>提交</button>
  113.         </form>
  114.     </body>
  115. </html>

权重计算

  1. <div>这是个div</div>
  2. <!-- 0, 0, 1 标签选择器，权重为1 -->
  3. <style>
  4.     div {
  5.         color: red;
  6.     }
  7. </style>
  9. <div class="a">这是个带有a类的div</div>
  10. <!-- 0, 1, 0 类选择器，权重为10 -->
  11. <style>
  12.     .a {
  13.         color: blue;
  14.     }
  15. </style>
  17. <div id="b">这是一个id为b的div</div>
  18. <!-- 1, 0, 0 ID选择器，权重为100 -->
  19. <style>
  20.     #b {
  21.         color: green;
  22.     }
  23. </style>
  25. <div id="c" class="d">这是既带类，又带id的div</div>
  26. <!-- 1, 1, 0 即带类，又带id的选择器，权重为110 -->
  27. <style>
  28.     #c.d {
  29.         color: chocolate;
  30.     }
  31. </style>
  32. <!-- 1, 1, 1 这个既带类，又带id，并且还带标签的选择器，权重为111，所以会覆盖上述样式 -->
  33. <style>
  34.     div#c.d {
  35.         color: darkviolet;
  36.     }
  37. </style>

【总结】权重顺序：!important > style > id > class > 标签

上下文选择器

  1. <div class="list">
  2.     <ul>
  3.         <li><a href="#">item1</a></li>
  4.         <li class="li">
  5.             <a href="#">item2</a>
  6.             <ul>
  7.                 <li>111</li>
  8.                 <li>222</li>
  9.                 <li>333</li>
  10.             </ul>
  11.         </li>
  12.         <li><a href="#">item3</a></li>
  13.         <li><a href="#">item4</a></li>
  14.         <li><a href="#">item5</a></li>
  15.     </ul>
  16. </div>
  17. <style>
  18.     /* 子选择器 ：>  */
  19.     .list > ul > li {
  20.         border: 1px solid red;
  21.     }
  23.     /* 后代选择器 ：空格 */
  24.     .list li {
  25.         border: 2px solid green;
  26.     }
  27.     /* 相邻/next/下一个，用+号即可 */
  28.     .list .li + li {
  29.         text-align: center;
  30.     }
  31.     /* 所有兄弟元素，用~ */
  32.     .li ~ * {
  33.         background-color: #eee;
  34.     }
  35. </style>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post