CSS子選擇器大於符號 [>]使用方法、HTML 標籤屬性選擇

子選擇器(選擇器之間使用大於符號):選擇父元素的子元素,不包括子元素的子元素

css選擇器使用大於符號可以選擇不含元素內的其他相同子元素。這個語法簡單的使用符號 大於在選擇器之間 [ > ]

以下範例可以看出在.div1 > p ,div1裡面的子元素div1-p2不受父元素引響,一樣是原來的黑色文字。若沒有使用[>]符號則連同子元素內的所有p,都會受樣式影響呈現紅色文字。
 

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

  .div2 p {
  color: #F00;
  }

  </style> 
  <div class="div1"><p>div1-P1</p><span><p>div1-P2</p></span></div>
  <div class="div2"><p>div2-P1</p><span><p>div2-P2</p></span></div>

HTML 標籤中的屬性進行選擇

這個css選擇器可選擇元素HTML標籤屬性進行選擇。
 

<style type="text/css">

  p[title] {
  color: #F00;
  }

</style>

<p title="t1">有title屬性的段落標籤</p>
<p>無title屬性的段落標籤</p>

 

DEMO

下載DEMO原始碼

注意:以上語法IE6無效
 

Posted in CSS

Find the last offers by SkyBet at www.bettingy.com BettingY.com Bonuses