html选择第一个clss,css3如何选择第一个子元素? 曾经终败给现在 2022-10-06 03:59 296阅读 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中文网 !! [f024a72c71bd5ebc2884aa59982679af.png]: /images/20221005/16f9f7ac7a6940a6bc7cd68eedf3dc48.png [00e172399abd14cdf3706637f2be41d1.png]: /images/20221005/7a3c46b78d9542a88bfb035e0c4a7e1a.png
还没有评论,来说两句吧...