search

博客列表 >表单+选择器权重计算+上下文选择器

表单+选择器权重计算+上下文选择器

deathpool
deathpool原创
2021年09月24日 16:45:15410浏览

用户注册表单

效果图：

代码：

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <title>Document</title>
  10.     <style>
  11.         div {
  12.             margin-top: 50px;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  19.     <!-- * form标签属性： -->
  20.     <!-- action:运行脚本的地址 -->
  21.     <!-- method:提交方式 ：1. POST 2.get -->
  22.     <!-- post:数据不在url中，数据安全，可发送大量数据，例如文件夹  -->
  23.     <!-- get:数据在url中，数据不安全，适合少量数据的发送，文件大小不超过4K -->
  24.     <!--*  onsubmit 事件在提交表单时发生。 -->
  25.     <!-- ! input标签属性 -->
  26.     <!-- required :input标签中的文本框不可为空 -->
  27.     <!-- autofocus :使此文本框为焦点，只能有一个 -->
  28.     <!-- placeholder：文本框提示文本，输入时会消失 -->
  29.     <!-- value：文本框文本值，表单提交时的会提交此数据 -->
  30.     <!-- checked是布尔属性，不需要值，只要存在就是true，用于表单单选按钮的默认选项 -->
  31.     <!-- 单选按钮中的name 属性必须保持一样，才能保证返回唯一值 -->
  32.     <!-- 复选按钮中的name中的hobby[]是数组，用于存储多种类型的数据，供后端调用 -->
  33.     <!-- * 下拉列表(select) -->
  34.     <!-- selected下拉列表的默认选项代码 -->
  35.     <!-- * 自定义下拉列表 -->
  36.     <!-- datalist+input -->
  37.     <!-- selected下拉列表的默认选项代码 -->
  38.     <!-- datalist标签的id 属性必须与Input标签的list属性及相关绑定 -->
  41.     <!-- 单行文本框 -->
  42.     <form action="php.php" method="POST">
  43.         <fieldset>
  44.             <legend>用户注册必填项</legend>
  46.             <label for="user">账号：</label>
  47.             <input type="text" id="user" required autofocus placeholder="请输入用户名"><br>
  49.             <label for="password">密码：</label>
  50.             <input type="password" id="password" name="password" required placeholder="请输入密码"><br>
  52.             <label for="email">邮箱：</label>
  53.             <input type="email" id="email" name="email" required placeholder="请输入邮箱"><br>
  56.         </fieldset>
  59.         <fieldset style="margin-top: 50px;">
  60.             <legend>用户注册选填项</legend>
  62.             <!-- * 单选按钮 -->
  63.             <!-- 单选按钮中的name 属性必须保持一样，才能保证返回唯一值 -->
  65.             <label for="default">性别：</label>
  66.             <label for="man">男:</label>
  67.             <input type="radio" id="man" name="gender">
  69.             <label for="woman"> 女:</label>
  70.             <input type="radio" id="woman" name="gender">
  72.             <label for="default">保密:</label>
  73.             <input type="radio" id="default" name="gender" checked><br>
  77.             <div>
  78.                 <!-- * 复选按钮 -->
  79.                 <!-- 复选框中的name 属性必须保持一样，才能保证返回唯一值 -->
  80.                 <!-- 复选按钮中的name中的hobby[]是数组，用于存储多种类型的数据，供后端调用 -->
  81.                 <label>爱好：</label>
  82.                 <label for="game">游戏:</label>
  83.                 <input type="checkbox" id="game" name="hobby[]" checked>
  85.                 <label for="movie">电影:</label>
  86.                 <input type="checkbox" id="movie" name="hobby[]">
  88.                 <label for="travel">旅游:</label>
  89.                 <input type="checkbox" id="travel" name="hobby[]"><br>
  92.             </div>
  93.             <div>
  94.                 <!-- * 下拉列表 -->
  95.                 <!-- selected下拉列表的默认选项代码 -->
  96.                 <span>想学习的知识：</span>
  97.                 <select name="grammar">
  99.                     <option value="1" selected>PHP</option>
  100.                     <option value="2">JAVASCRIPT</option>
  101.                     <option value="3">CSS</option>
  102.                     <option value="4">HTML</option>
  103.                 </select>
  104.             </div>
  106.             <div>
  107.                 <!-- * 自定义下拉列表 -->
  108.                 <!-- datalist+input -->
  109.                 <!-- selected下拉列表的默认选项代码 -->
  110.                 <!-- datalist标签的id 属性必须与Input标签的list属性及相关绑定 -->
  111.                 <label for="in"><span>搜索关键字：</span></label>
  112.                 <input type="search" id="in" name="search" list="keywords">
  113.                 <datalist id="keywords">
  116.                     <option value="PHP" selected>PHP</option>
  117.                     <option value="JAVASCRIPT">JAVASCRIPT</option>
  118.                     <option value="CSS">CSS</option>
  119.                     <option value="HTML">HTML</option>
  121.                 </datalist>
  122.             </div>
  124.         </fieldset>
  125.         <input style="width: 100%;" type="submit" value="提交">
  126.         <input style="width: 100%;" type="reset" value="重置">
  127.     </form>
  128. </body>
  130. </html>

选择器权重的计算

css样式优先级：!important>style>id>class>tag(标签选择器)

注：!important：用于css样式代码后面，提升样式代码为最优先级(主要用于调试，开发不使用)

  • 第一等：代表内联样式，如: style=””，权值为1000。
  • 第二等：代表ID选择器，如：#content，权值为0100。
  • 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
  • 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
  • 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。继承的样式没有权值。

例子：

  • 内联样式，如: style=”p{}”，权值为1000。
  • #p{}的权值为0100
  • .p{}的权值为0010
  • p{}的权值为0001
    总结：权值越大优先级越高
    优先级为：style=”p{}”>#p{}>.p{}>p{}——->(1000>0100>0010>0001)

权值的计算

h1{}的权值为0001
p{}的权值为0001
则：
h1 p{}的权值为0002

.h1{}的权值为0010
p{}的权值为0001
则：
.class p{}的权值为0011

h1 p{}的权值为0002
.class p{}的权值为0011
则：
.h1 h1 p{}的权值为0012

上下文选择器（相邻兄弟选择器）

  • 使用：如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

效果：

例子：
css代码：
li+li {font-weight: bold;}
html代码：

  1.  <div>
  2.         <ul>
  3.             <li>List item 1</li>
  4.             <li>List item 2</li>
  5.             <li>List item 3</li>
  6.         </ul>
  7.         <ul>
  8.             <li>List item 1</li>
  9.             <li>List item 2</li>
  10.             <li>List item 3</li>
  11.         </ul>
  12.     </div>
上一条：表单基础控件及Css权重计算下一条：HTML 表单详解 与 CSS 元素样式来源
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议