简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >常用表单元素的应用及选择器权重的计算过程

常用表单元素的应用及选择器权重的计算过程

zg的php学习
zg的php学习原创
2021年09月24日 15:40:51494浏览

常用表单元素的应用及选择器权重的计算过程

常用表单元素

  • label
    主要是通过 for 属性与 input 标签的 id 绑定来为 input 标签做标注。
  • input
    input 是表单最重要的元素，主要用来完成用户数据的交互。通过 type 属性，其可以变换为种形态。
  • select + option
    select 下拉列表元素，其每一个定义的待选择的选项由 option 元素定义。
  • textarea
    多行文本输入框
  • button
    按钮元素，
  • input + datalist + option
    datalist 是自定义列表元素，其 id 必须和 input 的 list 属性绑定，每一个预定义选项由 option 元素定义。
  • fieldset + legend
    fieldset 是表单元素分组标签，legend 为 fieldset 分组定义标题。
  1. <!DOCTYPE html>
  2. <html lang="en">
  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.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       :root {
  15.         font-size: 10px;
  16.       }
  17.       .box {
  18.         margin: auto;
  19.         width: 50vw;
  20.         min-width: 30rem;
  21.         font-size: 1.6rem;
  22.         border: 1px solid #448ef3;
  23.       }
  24.       .main {
  25.         margin: 0.5rem;
  26.       }
  27.       .ftitle {
  28.         height: 4rem;
  29.         line-height: 4rem;
  30.         text-align: center;
  31.         font-size: 2rem;
  32.         font-weight: 700;
  33.         color: white;
  34.         background-color: #448ef3;
  35.       }
  36.       .div_item {
  37.         margin: 0.3rem;
  38.       }
  39.       .m_title {
  40.         display: inline-block;
  41.         width: 30%;
  42.         text-align: right;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <div class="box">
  48.       <div class="ftitle">会员信息</div>
  49.       <div class="main">
  50.         <form action="" method="post" style="display: grid; gap: 0.5em">
  51.           <fieldset>
  52.             <legend class="ltitle">必填项</legend>
  53.             <div class="div_item">
  54.               <label for="username" class="m_title">用户名：</label>
  55.               <input
  56.                 type="text"
  57.                 id="username"
  58.                 autofocus
  59.                 placeholder="请输入用户名"
  60.                 required
  61.               />
  62.             </div>
  63.             <div class="div_item">
  64.               <label for="pwd1" class="m_title">密码：</label>
  65.               <input
  66.                 type="password"
  67.                 id="pwd1"
  68.                 required
  69.                 placeholder="请输入密码"
  70.               />
  71.             </div>
  72.             <div class="div_item">
  73.               <label for="pwd2" class="m_title">确认密码：</label>
  74.               <input
  75.                 type="password"
  76.                 id="pwd2"
  77.                 required
  78.                 placeholder="请再次输入密码"
  79.               />
  80.             </div>
  81.             <div class="div_item">
  82.               <label for="tel" class="m_title">手机号码：</label>
  83.               <input
  84.                 type="tel"
  85.                 id="tel"
  86.                 required
  87.                 placeholder="请输入11位手机号码"
  88.                 pattern="[0-9]{11}"
  89.               />
  90.             </div>
  91.             <div class="div_item">
  92.               <label for="secret" class="m_title">性别：</label>
  93.               <input type="radio" name="sex" id="male" />
  94.               <label for="male">男</label>
  95.               <input type="radio" name="sex" id="famale" />
  96.               <label for="famale">女</label>
  97.               <input type="radio" name="sex" id="secret" checked />
  98.               <label for="secret">保密</label>
  99.             </div>
  100.           </fieldset>
  101.           <div class="div_item">
  102.             <label for="email" class="m_title">邮箱：</label>
  103.             <input type="email" id="email" placeholder="请输入邮箱地址" />
  104.           </div>
  105.           <div class="div_item">
  106.             <div style="float: left">
  107.               <labe for="">兴趣爱好：</labe>
  108.             </div>
  109.             <div style="display: inline-block; width: 60%">
  110.               <input type="checkbox" name="hobby[]" value="game" id="game" />
  111.               <label for="game">游戏</label>
  112.               <input type="checkbox" name="hobby[]" value="book" id="book" />
  113.               <label for="book">阅读</label>
  114.               <input type="checkbox" name="hobby[]" value="music" id="music" />
  115.               <label for="music">音乐</label>
  116.               <input type="checkbox" name="hobby[]" value="play" id="play" />
  117.               <label for="play">运动</label>
  118.               <input type="checkbox" name="hobby[]" value="sleep" id="sleep" />
  119.               <label for="sleep">睡觉</label>
  120.               <input type="checkbox" name="hobby[]" value="movie" id="movie" />
  121.               <label for="movie">电影</label>
  122.             </div>
  123.           </div>
  124.           <div class="div_item">
  125.             <label for="city" class="m_title">城市：</label>
  126.             <select name="city" id="city">
  127.               <option value="bj">北京</option>
  128.               <option value="sh">上海</option>
  129.               <option value="gz">广州</option>
  130.               <option value="sz">深圳</option>
  131.             </select>
  132.           </div>
  133.           <div class="div_item">
  134.             <label for="" class="m_title">职业：</label>
  135.             <input name="zy" list="zy" />
  136.             <datalist id="zy">
  137.               <option value="国家公务员"></option>
  138.               <option value="专业技术人员"></option>
  139.               <option value="工人"></option>
  140.               <option value="农民"></option>
  141.               <option value="学生"></option>
  142.               <option value="其他"></option>
  143.             </datalist>
  144.           </div>
  145.           <div class="div_item">
  146.             <div style="float: left">
  147.               <labe for="">个人简历：</labe>
  148.             </div>
  149.             <textarea name="grjl" id="grjl" cols="25" rows="5"></textarea>
  150.           </div>
  151.           <button>提交</button>
  152.           <button type="reset">重置</button>
  153.         </form>
  154.       </div>
  155.     </div>
  156.   </body>
  157. </html>

运行结果：
会员信息

选择器权重的计算过程

选择器的权重

基本原则：id > class > tag

  1. <div class="box" id="box"></div>
  2. <style>
  3.   .box {
  4.     width: 100px;
  5.     height: 100px;
  6.     border: 1px solid black;
  7.     background-color: black;
  8.   }
  9.   div {
  10.     background-color: #fff;
  11.   }
  12. </style>

class大于tag
class 的样式覆盖了 tag。

  1. <div class="box" id="box"></div>
  2. <style>
  3.   .box {
  4.     width: 100px;
  5.     height: 100px;
  6.     border: 1px solid black;
  7.     background-color: black;
  8.   }
  9.   div {
  10.     background-color: #fff;
  11.   }
  12.   #box {
  13.     background-color: red;
  14.   }
  15. </style>

id大于class
id 的样式又覆盖了 class 的样式。

具体计算选择器的权重时，可以代入以下表格。

百位 十位 个位
id class tag
0 0 0 
  1. <div class="box" id="box"></div>
  2. <style>
  3.   .box {
  4.     width: 100px;
  5.     height: 100px;
  6.     border: 1px solid black;
  7.     background-color: black;
  8.   }
  9.   div {
  10.     background-color: #fff;
  11.   }
  12.   #box {
  13.     background-color: red;
  14.   }
  15.   body > #box {
  16.     background-color: green;
  17.   }
  18. </style>

选择器权重的计算过程

从计算图示可以看出 [ body > #box ] 这个选择器中有一个tag和一个id，所以它的权重最大，运行结果如下图

运行结果

上下文选择器

上下文选择器是通过依据元素在其位置的上下文关系来进行元素选择的。

上下文选择器主要有以下几种：

  • 后代选择器

    语法：选择器 1 选择器 2｛样式声明｝
    例：ul li{…} 选择 ul 列表下的所有 li

  • 子元素选择器

    语法：选择器 1 > 选择器 2｛样式声明｝
    例：.box>ul li{…} 选择.box 下的 ul 下的所有 li，其它的 ul 下的 li 不会被选中。

  • 相邻元素选择器

    1.语法：选择器 1 + 选择器 2｛样式声明｝ (+号选择紧挨着的那个兄弟元素)
    例：#menu + li{…} 选中 id 为 menu 后面紧挨着的那个同级 li。如果其后不是 li 则不会选中。

    2.语法：选择器 1 ~ 选择器 2｛样式声明｝(~号选择后面所有的同级兄弟元素)
    例：#menu ~ li{..} 选中 id 为 menu 后面的所有同级 li。

上一条：CSS3 媒体（@media）查询简介下一条：0917作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多