html怎么只操作第一个li,css3如何选择第一个子元素？

css3如何选择第一个子元素？下面本篇文章就来给大家介绍一下使用CSS选择某元素第一个子元素的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

css3如何选择第一个子元素？

在CSS中，可以使用:first-child选择器来选择某元素的第一个子元素；:first-child是用来选择某个元素的第一个子元素。

:first-child 选择器匹配其父元素中的第一个子元素。

比如我们这里的这个demo，你想让列表中的"1"具有与从不同的样式，按照之前的写法，我们需在要第一个li上加上一个相应的class名，比如说“first”，然后我们在给予对应的样式，如下：.wrap li.first {background: green; border: 1px dashed blue;}

在CSS3最新选择器出现之后，我们就可以使用:first-child来实现，就不需要在增加一个额外的class名了，设置如下：.wrap li:first-child {background: green; border: 1px dashed blue;}

两种方法最终效果是一样的，只是后者对我来说在操作上会更显得简单、方便、快捷。

注意： :first-child作用于 IE8以及更早版本的浏览器，DOCTYPE必须已经声明。

示例：设置列表中的第一个

元素选择的样式：

li:first-child {

background: yellow;

}

• Coffee
• Tea
• Coca Cola

1. Coffee
2. Tea
3. Coca Cola

效果图：

更多前端开发知识，请查阅 HTML中文网 ！！