CSS樣式中的後代選擇器和子代選擇器

枕夢發表於2017-04-18
CSS
屬性的繼承性：例如屬性color具有繼承性
當樣式中的上一次有color屬性時，次樣式內包裹的樣式都具有color的屬性值
後代選擇器用空格隔開；
子代選擇器用">"箭頭隔開
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*後代選擇器（空格）:container下的所有的div都是紅色*/
     #container div{
            color: red;
        }

        /*子代選擇器（箭頭）：*/
        #container > div{
            color: red;
        }
        #container > .china{
            color: red;
        }

        .china1{
            color: green;
        }
    </style>
    <title>後代選擇器</title>
</head>
<body>

    <div id="container">
        <div>div1</div>
        <div class="china">div2</div>
        <div>div3</div>
        <div>div4</div>
        <div class="china">div5
            <div class="china1">孫子元素div6</div>
        </div>
    </div>

</body>
</html>

相關文章