美文网首页
通用兄弟选择器 + ~

通用兄弟选择器 + ~

作者: Simon_s | 来源:发表于2016-09-27 19:24 被阅读91次

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    p{
    height: 30px;
    background-color: red;
    }
    /* + 当前元素的下一个 /
    .item1+p{
    background-color: aqua;
    }
    /
    当前之后的所有p元素的样式*/
    .item3~p{
    background-color: blue;
    }

    </style>
    

    </head>
    <body>
    <div id="box">
    <p class="item1"></p>
    <p class="item2"></p>
    <p class="item3"></p>
    <p class="item4"></p>
    <p class="item5"></p>
    </div>
    </body>
    </html>

    相关文章

      网友评论

          本文标题:通用兄弟选择器 + ~

          本文链接:https://www.haomeiwen.com/subject/obxhyttx.html