CSS组合选择器

子元素选择器

子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>子元素选择器</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: #cccccc;
        }
       div>p{
           background: orangered;
       }
    </style>
</head>
<body>
    <div>
        <p>我就是我</p>
        <p>你就是你</p>
    </div>
</body>
</html>

　　

相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>相邻兄弟选择器</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: #cccccc;
        }
        #p1+p{
            background: orangered;
        }
    </style>
</head>
<body>
    <div>
        <p id="p1">我就是我</p>
        <p>你就是你</p>
        <p>他就是他</p>
    </div>

</body>
</html>

　　

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后续兄弟选择器</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: #cccccc;
        }
        #p1~p{
            background: orangered;
        }
    </style>
</head>
<body>
    <div>
        <p id="p1">我就是我</p>
        <p>你就是你</p>
        <p>他就是他</p>
    </div>

</body>
</html>

 

　　

 

posted @ 2017-06-26 09:21  奔跑的经理  阅读(199)  评论(0)    收藏  举报