css first-child实例及详解

时间：2016-10-12 
<body>
    <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>
</body>

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

ul:first-child{backgroud-color:#ccc;}

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

 

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

li:first-child{backgroud-color:#ccc;}

或者

.fruit>:first-child{backgroud-color:#ccc;}
上一条：css3 气泡对话框实例 下一条:css 如何让浮动DIV水平居中

相关文章

最新文章

Copyright © 2021-2022 深圳市沃梦达电子商务有限公司 All Rights Reserved.