<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;}

继续阅读与本文标签相同的文章

伪类 first-child
最新文章 最热文章
收藏 打印

特别推荐 2026年05月14日 星期四

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章

1
css :first-child选择器使用实例详解
149人阅读
2
css3 气泡对话框实例
763人阅读
3
css after before制作的边三角提示框
387人阅读