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

曾经终败给现在 2022-10-06 03:59 344阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，344人围观）

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

相关阅读

相关如何通过CSS选择器选择一个元素的子元素？如何选择第一个子元素和最后一个子元素？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 选择一个元素的子元素 ⭐ 选择第一个子元素和最后一个子元素 ⭐ 注意事项 ⭐ 写在最后 ---

短命女/ 2023年10月14日 18:28/ 0 赞/ 45 阅读

相关 CSS3 选择前几个元素

/ 选择第n个，n位数字 / :nth-child(n) 选择列表中的偶数标签 :nth-child(2n) 选择列

我不是女神ヾ/ 2022年12月23日 15:23/ 0 赞/ 165 阅读

相关 CSS_css选择器，选择所有子元素、最后一个、第一个、单数、双数、第n个、反选，nth-child，last-child，first-child

html <div class="list"> <div></div> <div></div> <div></div> </di

Myth丶恋晨/ 2022年11月12日 02:37/ 0 赞/ 346 阅读

相关 CSS 选择器选择前几个元素

CSS 选择器选择前几个元素选择第n个，n代表数字 `:nth-child(n){ }` 选择列表中的偶数的标签 `:nth-ch

Dear 丶/ 2022年10月17日 00:37/ 0 赞/ 22 阅读

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

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

曾经终败给现在/ 2022年10月06日 03:59/ 0 赞/ 345 阅读

相关选择时间表单html,{HTML5}表单选择器-第一节

表单作为 HTML 中一种特殊的元素，操作方法较为多样性和特殊性，开发者不但可以使用之前的常规选择器或过滤器，也可以使用 jQuery 为表单专门提供的选择器和过滤器来准确的

骑猪看日落/ 2022年10月06日 03:55/ 0 赞/ 31 阅读

相关 html 子类选择器,详解如何使用CSS选择所有子元素

如何使用CSS递归选择所有子元素？下面本篇文章就来给大家介绍一下使用CSS递归选择所有子元素的方法，希望对大家有所帮助。当元素是某个元素的子元素时，可以使用子选择器匹配，该

╰半夏微凉°/ 2022年10月06日 03:55/ 0 赞/ 307 阅读

相关 jquery选择多个元素

<!DOCTYPE html> <html> <head> <title>sele1,sele2,seleN选择器</title>

本是古典何须时尚/ 2022年08月11日 19:58/ 0 赞/ 241 阅读

相关 easyui tree 默认选中第一个元素的子元素

//构造左边的树 function InitTree() \{ //初始化功能模块树 $('\tree\_pxypj').t

àì夳堔傛蜴生んèń/ 2022年03月31日 11:06/ 0 赞/ 279 阅读

相关 jquery获取第一个子元素

如获取id为divId的div下的第一个子div 1 $("\divId").children(“div”).get(0) 但得到的是一个dom对象，如果要得到Jqu

灰太狼/ 2022年03月17日 02:44/ 0 赞/ 343 阅读