Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 简单选择器与上下文选择器
Blogger Information
Blog 56
fans 1
comment 0
visits 62184
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
706 people have browsed it

简单选择器

classs选择器

  • 用（.）来标记 文档中的个元素可以具有相同的类名，而单个元素可以用多个类名（之间用空格隔开）。

id选择器

  • 用（#）来标记 id名称必须在文件中是唯一的。

通用选择

  • 用（*）来标记 选择一个页面中所有的元素

实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <style>
  9.    *{
  10.       margin: 0 auto;
  11.       font-size: 14px;
  12.    }
  13.    /* 通用选择器页面中所有的元素 */
  14.    #box
  15.    {
  16.        width: 200px;
  17.        height:200px;
  18.        background: cornflowerblue;
  19.    }
  20.    /* 标记页面中唯一的元素 */
  21.    .box_text
  22.    {
  23.      text-align: center;
  24.      line-height: 200px;
  25.      font-size: 2rem;
  26.      color: cornsilk;
  27.    }
  28.      /* 页面中元素可以相同的类名 */
  29. </style>
  30. <body>
  31.     <div id="box">
  32.       <div class="box_text">简单选择器</div>
  33.     </div>
  34. </body>
  35. </html>

上下文选择器

1. 后代选择器:先找到祖先元素,再选择它下面的所有指定后代元素。

  • 语法: 祖先与目标之间用空格分开,可以有多级,用多个空格区隔
    格式: 祖先 目标 {样式声明}

2. 子选择器:先找到父级元素,再选择他下面所有直接后代元素。

  • 语法: 父级与目标直接用 > 分开 。
    格式: 父级 > 目标元素 {样式声明}

3. 相邻选择器: 先确定同胞元素的起始点,选择后面的所有的指定元素。

  • 语法: 相邻元素的起始点用+号连接。
    格式: 元素本身 + 相邻元素 {样式声明}

4. 同级所有选择器: 同级共享指定元素。

  • 语法: 同级相同的所有元素 ~ 号连接。
    格式: 元素本身 ~ 同级元素 {样式声明}

实例：

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     .box {
  11.          width: 330px;
  12.          height: 330px;
  13.          margin: 0 auto;
  15.     }    
  16.     .item
  17.      {
  19.          border: 1px solid darkblue;
  20.          width: 100px;
  21.          height: 100px;
  22.          float: left;
  23.          margin: 4px;
  24.          font-size: 2rem;
  25.          text-align: center;
  26.          line-height: 100px;
  27.      }
  28.     .box div
  29.     {
  30.         background: coral;         
  31.     }
  32.     /* 后代选择器：空格 */
  33.     body > div
  34.     {
  35.         background: blueviolet;
  36.     }
  37.     /* 父子选择器：> */
  38.     .item.center
  39.     {
  40.         background: thistle;
  41.     }
  43.     .item.center + .item
  44.     {
  45.         font-size: 3rem;
  46.         color: thistle;
  47.     }
  48.     /* 相邻选择器: +  */
  51.     .item.center ~ .item
  52.     {
  53.         width: 45px;
  54.         height: 45px;
  55.         float: left;
  56.         border: 1px solid teal;
  57.         font-size: 1rem;
  58.         line-height: 40px;
  59.         color: white;
  60.         margin: 2px;
  61.     } 
  62.     /* 同级下所有选择器：~ */
  63. </style>
  64. <body>
  65.     <div class="box">
  66.         <div class="item">1</div>
  67.         <div class="item">2</div>
  68.         <div class="item">3</div>
  69.         <div class="item">4</div>
  70.         <div class="item center">5</div>
  71.         <div class="item">6</div>
  72.         <div class="item">7</div>
  73.         <div class="item">8</div>
  74.         <div class="item">9</div>
  75.     </div>
  76. </body>
  77. </html>
Correcting teacher：WJWJ

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