首頁  >  文章  >  web前端  >  css first-child实例及详解

css first-child实例及详解

WBOY
WBOY原創
2016-06-01 09:53:261702瀏覽
<code class="language-html">
    <ul class="fruit">
        <li>Apple</li>
        <li>Orange</li>
        <li>Pear</li>
        <li>Grape</li>
    </ul>
    <div class="content">
        <p>I am learning CSS.</p>
        <p>I want to be a programmer.</p>
    </div>
</code>

如何设置ul的第一个子元素的背景颜色?我想很多人会想当然的这样使用

<code class="language-css">ul:first-child{backgroud-color:#ccc;}</code>

结果整个ul元素都被选中了!这样是错误的。

 

我们可以看看手册,first-child选择器用于选取属于其父元素的首个子元素的指定选择器”,这里要理解其父元素。针对上述代码,也就是说应该设置成这样:

<code class="language-css">li:first-child{backgroud-color:#ccc;}</code>

或者

<code class="language-css">.fruit>:first-child{backgroud-color:#ccc;}</code>

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn