1. 程式人生 > >CSS高階選擇符-家族關係

CSS高階選擇符-家族關係

一、子選擇符(注意區別派生選擇器)
子選擇符是後代選擇符的一個特殊型別。子選擇符僅指那些屬於其他元素子女的元素,不是指任何“孫子”或其他後代。子選擇符由父元素與子元素間的大於符號(>)指示:父 > 子 {宣告;}

二、近親選擇符
如果兩個HTML標籤具有相同的父母,那麼他們就是同胞;如果原始碼中第二個直接出現在第一個之後,那麼它們就是近親。下面是用來說明同胞關係的一些HTML。
<ul>
     <li id="greg">Grey</li>
     <li id="peter">Peter</li>
     <li id="bobby">Bobby</li>
</ul>

三個li元素是同胞,grey<li>和peter<li>是近親,peter<li>和bobby<li>是近親,而grey<li>和bobby<li>是同胞不是近親。

li + li {color:blue;}此規則只將名字Peter和Bobby變成了藍色,因為它們是直接跟隨另一個li元素的li元素。