Joyce Hsu 的部落格

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

 

<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>