CSS 子元素選擇器[>]

以下示範子元素選擇器[>]使用方法，子元素選擇器不會影響孫元素

<style type="text/css">
    //css one
    .div1 > p {
        color: #F00;
    }

    //css two
    .div2 p {
        color: #F00;
    }
</style>

<!-- css one 只會影響div1內的p(子元素)，但不會影響span內的p(孫元素) -->
<div class="div1">
    <p>test</p>
    <span>
        <p>test</p>
    </span>
</div>

<!-- css two 會影響所有div2內的p -->
<div class="div2">
    <p>test</p>
    <span>
        <p>test</p>
    </span>
</div>