search

博客列表 >表单元素、选择器权重以及上下文选择器实战

表单元素、选择器权重以及上下文选择器实战

王浩
王浩原创
2021年09月24日 12:03:17412浏览
  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>
上一条：vue传一个参数绑定多个class的一种方法下一条：选择器权重的计算过程
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多