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

曾经终败给现在 2022-10-06 03:59 402阅读 0赞

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

f024a72c71bd5ebc2884aa59982679af.png

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

效果图：

00e172399abd14cdf3706637f2be41d1.png

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

发表评论

表情：
评论列表 （有 0 条评论，402人围观）

还没有评论，来说两句吧...

相关阅读