非零基础自学前端最后一遍一 HTML+CSS 8 CSS常见选择器 8.4 选择器-后代选择器

末蓝、 2024-03-25 14:11 37阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  8 CSS常见选择器
         *   *  8.4 选择器-后代选择器

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

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

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

##### 8.4 选择器-后代选择器 #####

*  后代选择器一: 所有的后代(直接/间接的后代)
    
     *  选择器之间以空格分割

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

不加样式是这样的

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

*  后代选择器二: 直接子代选择器\*\*(必须是直接子代)\*\*
    
     *  选择器之间以 > 分割

![在这里插入图片描述][7d6a1e1ab2684d87a94421bf282adf8c.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>
        .box > span {
          
          color: red;
        }
      </style>
    </head>
    
    <body>
      <div class="box">
        <div>
          <span>哈哈哈</span>
        </div>
      </div>
    
      <div class="box">
        <span>呵呵呵</span>
      </div>
    </body>
    
    </html>

[9c19df07763c4369bd4c0995507e0bd6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/eb9a307a4aca4047b31877536e3397a4.png
[94681198f9cf42a59003eb83573b957f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/2410c0b109ad48d8872aef38dbb2d923.png
[6f8f7ca7c2fd4ee4aab528c7fd31d6e9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3e6de6b54dbd485bba5aba6e31745545.png
[7d6a1e1ab2684d87a94421bf282adf8c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c884ab379d654bdfb8e793c49faddae8.png