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

﹏ヽ暗。殇╰゛Y 2024-03-25 14:11 54阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  8 CSS常见选择器
         *   *  8.5 选择器-兄弟选择器
             *   *  8.5.1 兄弟选择器(sibling combinator)

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

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

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

##### 8.5 选择器-兄弟选择器 #####

###### 8.5.1 兄弟选择器(sibling combinator) ######

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

*  兄弟选择器一:相邻兄弟选择器
    
     *  使用符号 + 连接

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

*  兄弟选择器二: 普遍兄弟选择器 ~
    
     *  使用符号 ~ 连接

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

[2dea2329e09d4b748348121502dae94a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/072a91f3c8ef4ae68982242ce045a7f9.png
[b29b5e1bfdb8430bb9f6e68e877fbf82.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d8a9333fc10a43419abab851d6648973.png
[7ba509369ea24502844c3c782e84ea94.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c5ab09d3c0ec41dd822d25417670efe4.png
[822d25a67b95425f8604a35201bcc6c8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/720984fd81df4c1a8a9c673c13fc0567.png