层次选择器2

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        *{margin: 0;padding: 0}
        body{width: 300px;margin: 0 auto}
        div{margin:5px;padding: 5px;border: 1px solid #cccccc}
        /*后代选择器 E F 5，6，8，9，10是后代*/
        div div{background: orange}
        /*子选择器 E>F:body下面的子div*/
        body > div{background: green}
        /*相邻兄弟选择器E+F：具有相同的父元素*/
        .active+div{background: lime}
        /*css3新增加的通用兄弟元素选择器：E~F:用于选择某元素后面所有的兄弟元素*/
        .active~div{background: red}




    </style>
</head>
<body>
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4
    <div>5</div>
    <div>6</div>
</div>
<div>7
    <div>8
        <div>9
            <div>10</div>
        </div>
    </div>
</div>
</body>
</html>