兄弟选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>兄弟选择器</title>
        <style>
            p + span{
                background-color: #00FFFF;
            }
            
            p ~ span{
                background-color: #FFFF00;
            }
        </style>
    </head>
    <body>
        <div>
            我是一个div
            <p>我是一个p</p>
            <span>我是第一个span</span>
            <span>我是第二个span</span>
            <p>我是另一个p</p>
            <p>我是第二个p</p>
            <span>我是第三个span</span>
            <p>我是第三个p</p>
        </div>
    </body>
</html>

 

posted @ 2022-05-08 15:27  氯丙嗪  阅读(20)  评论(0)    收藏  举报