非零基础自学前端最后一遍一 HTML+CSS 8 CSS常见选择器 8.6 选择器-选择器组(交集并集)

超、凢脫俗 2024-03-25 14:11 41阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  8 CSS常见选择器
         *   *  8.6 选择器-选择器组(交集并集)
             *   *  8.6.1 选择器组 – 交集选择器
                 *  8.6.2 选择器组 – 并集选择器

![在这里插入图片描述][d361b91498e54113861c25972ac62083.png_pic_center]

#### 一 HTML+CSS ####

#### 8 CSS常见选择器 ####

##### 8.6 选择器-选择器组(交集并集) #####

###### 8.6.1 选择器组 – 交集选择器 ######

交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)

*  在开发中通常为了精准的选择某一个元素;

![在这里插入图片描述][42256fc14e9944f3a305204c2dedf35e.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        div.one {
          
          color: red;
        }
      </style>
    </head>
    
    <body>
      <div class="one">哈哈哈</div>
      <div>呵呵呵</div>
      <p class="one">嘻嘻嘻</p>
    </body>
    
    </html>

![在这里插入图片描述][47057d9f8c514551a7b50b29dd885129.png_pic_center]

###### 8.6.2 选择器组 – 并集选择器 ######

并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)

*  在开发中通常为了给多个元素设置相同的样式;

![在这里插入图片描述][f12ffc16d1ca42c590ff3909379aa4e9.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .one, .two {
          
          color: blue;
          font-size: 20px;
        }
      </style>
    </head>
    
    <body>
    
      <div class="one">哈哈哈</div>
      <div class="two">呵呵呵</div>
    </body>
    
    </html>

![在这里插入图片描述][17b7ea0614804d438f2a6217bc46e420.png_pic_center]

[d361b91498e54113861c25972ac62083.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/4dd8976597ae43a9b8b5353f22a31b19.png
[42256fc14e9944f3a305204c2dedf35e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f82c5a429b504cd192f3ea5525b92582.png
[47057d9f8c514551a7b50b29dd885129.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0c8c6a842e1e4f5abaf37cc1617c2d68.png
[f12ffc16d1ca42c590ff3909379aa4e9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/eb3eee6ec63a46caaf9345e13ca27e41.png
[17b7ea0614804d438f2a6217bc46e420.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/dbe0b35085b34b069079178a3e6f7335.png