<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>兄弟元素选择器</title>
        <style type="text/css">
            /* 
                后一个兄弟元素选择器
                    作用: 可以选中一个元素后紧挨着的指定的兄弟元素
                    语法: 前一个+后一个
             */
            p+span{
                color: red;
            }
            
            span+div{
                color: #0000FF;
            }
            
            /* 
                选中后面所有的兄弟元素
                    语法: 前一个 ~ 后边所有
             */
            div~p{
                background-color: #8A2BE2;
            }    
            
        </style>
    </head>
    <body>
        <p>这是p标签</p>
        <p>这是p标签</p>
        <p>这是p标签</p>
        <span>这是span</span>
        <div>这是div</div>
        <p>这是p标签</p>
        <p>这是p标签</p>
        <p>这是p标签</p>
    </body>
</html>
posted on 2021-06-29 15:17 leiyanting 阅读(350) 评论(0) 收藏举报
刷新页面返回顶部
导航
