css選取器的一些說明

標籤：ima   ges   logs   技術分享   說明   foo   選取器   color   img   

標籤選取器、ID選取器、類別選取器 這三個很簡單，沒啥可說的。

子選取器得說一下。

<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>蘋果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>捲心菜</li>
        </ul>
    </li>
</ul>

 

上面一個ul，如果對應的css代碼是：

.food>li{border:1px solid red;}
那麼效果是怎麼樣的。

.food>li選擇的是food這個類的元素所包含的第一代的li元素，第一代，不是第一個，也不是所有。

啥叫第一代。

 

 

 

與此相似的的.food li{border:1px solid red;}

.food和li中間有一個空格，選擇的元素是類名為food的元素下的所有的li元素

 

css選取器的一些說明