Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html三大样式选择器
Blogger Information
Blog 7
fans 0
comment 0
visits 2513
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
html三大样式选择器
追梦赤子
Original
434 people have browsed it

HTML三大选择器的使用

  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.         /* 1. 基本选择器 */
  10.         /* 1.1 便签选择器 */
  11.         dd {
  12.             color: red;
  13.         }
  14.         /* 1.2 属性选择器 */
  15.         /* .attr {
  16.             color: lightcoral;
  17.         } */
  18.         dd[class=attr] {
  19.             color: lightpink;
  20.         }
  22.         /* 2. 上下文选择器 */
  23.         /* 2.1 父子 */
  24.         .list > .item {
  25.             border: thin solid;
  26.         }
  27.         /* 2.2 后代 */
  28.         .list2 .item2 {
  29.             color: red;
  30.         }
  31.         /* 2.3 兄弟(只选取第一个) */
  32.         .list3 .item3.brother + .item3 {
  33.             background-color: red;
  34.         }
  35.         /* 2.4 同级(除了当前元素的所有同级) */
  36.         .list4 .item4.brother ~ .item4 {
  37.             background-color: red;
  38.         }
  40.         /* 3. 结构伪类选择器 */
  41.         /* 匹配第一个 */
  42.         .order > :nth-child(0n + 1) {
  43.             background-color: red;
  44.         }
  45.         /* 匹配第三个 */
  46.         /* .order > :nth-child(0n + 3) {
  47.             background-color: red;
  48.         } */
  49.         /* 0乘以任何数得0所以 0n+1 === 1 */
  50.         /* .order > :nth-child(1) {
  51.             background-color: blue;
  52.         } */
  54.         /* a = 1 匹配一组 */
  55.         .order > :nth-child(1n +3) {
  56.             background-color: red;
  57.         }
  58.         /* 只获取前三个 */
  59.         /* a = -1:反向匹配 */
  60.         .order > :nth-child(-n + 3) {
  61.             background-color: yellow;
  62.         }
  63.         /* 2n 偶数位匹配 */
  64.         .order > :nth-child(2n) {
  65.             background-color: gray;
  66.         }
  67.         /* 2n+1 奇数匹配 */
  68.         /* .order > :nth-child(2n + 1) {
  69.             background-color: gray;
  70.         } */
  71.         /* 匹配首个 */
  72.         .order > :first-child {
  73.             background-color: blueviolet;
  74.         }
  75.         /* 匹配最后一个 */
  76.         .order > :last-child {
  77.             background-color: blueviolet;
  78.         }
  79.         /* 匹配倒数2个 */
  80.         .order > :nth-last-child(-1n + 2) {
  81.             background-color: orange;
  82.         }
  84.         /* 4.状态伪类选择器 */
  85.         fieldset {
  86.             display: inline-grid;
  87.             gap : 1em;
  88.         }
  89.         /* 4.1 鼠标悬停 提交按钮变灰色*/
  91.         /* 4.2 有效控件 */
  92.         fieldset :enabled {
  93.             border-radius: 5px;
  94.         }
  95.         /* 4.3 禁用控件 邀请码*/
  96.         fieldset :disabled {
  97.             background-color: brown;
  98.         }
  99.         /* 4.4 选中控件 记住我*/
  100.         fieldset :checked + label {
  101.             color: red;
  102.         }
  103.         /* 4.5 必选控件 用户名*/
  104.         fieldset :required {
  105.             border-color: red;
  106.         }
  107.         /* 4.6 焦点控件 */
  108.         fieldset button:hover {
  109.             cursor : pointer;
  110.             background-color: beige;
  111.         }
  114.     </style>
  115. </head>
  116. <body>
  117.     <section>
  118.         <dl>
  119.             <dt><h2>1. 基本选择器：</h2></dt>
  120.             <dd>1.1 标签选择器</dd>
  121.             <dd class="attr">1.2 属性选择器</dd>
  122.         </dl>
  124.         <h2>2. 上下文选择器：</h2>
  125.         <h3>2.1 父子 ></h3>
  126.         <ul class="list">
  127.             <li class="item">itme1</li>
  128.             <li class="item">itme2</li>
  129.             <li class="item">itme3</li>
  130.             <li class="item">itme4</li>
  131.         </ul>
  132.         <h3>2.2 后代 ' '(空格)</h3>
  133.         <ul class="list2">
  134.             <li class="item2">itme1</li>
  135.             <li class="item2">
  136.                 itme2
  137.                 <ul>
  138.                     <li class="item">
  139.                         item2-1
  140.                         <ul>
  141.                             <li class="item">item2-1-1</li>
  142.                             <li class="item">item2-1-2</li>
  143.                             <li class="item">item2-1-3</li>
  144.                           </ul>
  145.                     </li>
  146.                     <li class="item">item2-2</li>
  147.                     <li class="item">item2-3</li>
  148.                   </ul>
  149.             </li>
  150.             <li class="item2">itme3</li>
  151.             <li class="item2">itme4</li>
  152.         </ul>
  153.         <h3>2.3 兄弟 +</h3>
  154.         <ul class="list3">
  155.             <li class="item3 brother">itme1</li>
  156.             <li class="item3">itme2</li>
  157.             <li class="item3">itme3</li>
  158.             <li class="item3">itme4</li>
  159.         </ul>
  160.         <h3>2.4 同级 ~</h3>
  161.         <ul class="list4">
  162.             <li class="item4 brother">itme1</li>
  163.             <li class="item4">itme2</li>
  164.             <li class="item4">itme3</li>
  165.             <li class="item4">itme4</li>
  166.         </ul>
  167.         <h2>3. 结构伪类选择器：</h2>
  168.         <ol class="order">
  169.             <li class="item">item1</li>
  170.             <li class="item">item2</li>
  171.             <li class="item">item3</li>
  172.             <li class="item">item4</li>
  173.             <li class="item">item5</li>
  174.             <li class="item">item6</li>
  175.         </ol>
  176.         <h2>4. 状态伪类选择器</h2>
  177.         <fieldset>
  178.             <legend>用户注册</legend>
  179.             <input type="text" id="username" name="username" placeholder="用户名" required />
  180.             <input type="email" id="email" name="email" placeholder="邮箱" />
  181.             <input type="password" id="password" name="password" placeholder="密码" required />
  182.             <input type="text" id="vcode" name="vcode" placeholder="邀请码" disabled />
  183.             <section>
  184.                 <input type="checkbox" id="rem" name="remember" checked="checked" />
  185.                 <label for="rem">记住我</label>
  186.             </section>
  187.             <button type="button">提交</button>
  188.         </fieldset>
  189.     </section>
  190. </body>
  191. </html>

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