兄弟元素选择器 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>兄弟元素选择器</title>
        <style type="text/css">
            /*
              为span后的一个p元素设置背景为黄色
               后一个兄弟元素选择器
                 - 可以选中一个元素后紧挨着的指定兄弟元素
               语法 前一个 + 后一个
            */
           /* span + p{
               background-color: #FFFF00;
           } */
           
           /*
             选中后边所有兄弟元素
                - 语法：前一个 ~ 后一个
           
           */
          span ~ p{
              background-color: #FFFF00;
          }
        </style>
    </head>
    <body>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <span>我是一个span</span>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
    </body>
</html>

 

 

后一个兄弟选择器

      - 可以选中一个元素后紧挨着的指定兄弟元素（必须是紧挨着的兄弟元素）

  语法  前一个 + 后一个

 

        选中后面所有兄弟元素

  语法  前一个 ~ 后一个

 

posted @ 2021-06-30 10:49  2237774566  阅读(74)  评论(0)    收藏  举报