那些年踩过的坑之:first-child伪类选择器

最新推荐文章于 2023-09-05 16:06:32 发布
最新推荐文章于 2023-09-05 16:06:32 发布
阅读量231 收藏
点赞数
分类专栏： html 文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyxkgc/article/details/120218204
版权
本文详细介绍了CSS中的`:first-child`选择器，澄清了常见的两个误解，并通过实例演示了其正确用法。`:first-child`实际上选取的是父元素的第一个子元素，而非某个特定元素的第一个实例。通过实例，读者可以更深入地理解该选择器的工作原理及其在网页布局和样式应用中的重要性。
摘要由CSDN通过智能技术生成

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。——w3school

嗯，乍一看好像说的不是很明白，因此这个选择器很容易让人误解，通常会有两种误解：
误解一：认为E:first-child选中E元素的第一个子元素。
误解二：认为E:first-child选中E元素的父元素的第一个E元素。

你是不是也曾这样理解这个选择器或者现在仍然这样理解？以上两种理解都是错误的，为了证明上面两种理解是错的，看看下面的实例

一个链接 一个链接 一个链接 一个链接

待续…

九霄123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈jquery选择器 :first与:first-child的区别
10-21
本文将深入探讨两个经常被混淆的选择器：`:first`和`:first-child`，并揭示它们之间的差异。 `:first`选择器是jQuery的一个特殊选择器，它会选取匹配该选择器的元素集合中的第一个元素。例如，当使用`$('ul li:...
:first-child不生效问题
Anyuegogogo的博客
12-02 1362
:first-child不生效问题
【CSS3】小项目中使用first-child遇到的坑
Alphy_Hongwu的博客
09-04 310
【CSS3】小项目中使用first-child遇到的坑 博主在练习Grid布局的时候，因为偷懒没有给container里面的items上css类，打算直接用:nth-child进行设置,代码写好如下： <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
CSS中的:nth-child，:first-child，:last-child
12-30 2038
【代码】CSS中的:nth-child。
常用伪类选择器之 :last-child()、:first-child()、nth-child()、:nth-of-type()
Wod_7的博客
05-22 2008
在CSS中，常规选择器可以根据元素的类型、类、ID、指定的属性，或者它们的父级或子级进行选择。与常规选择器不同，伪类选择器可以根据元素的状态或位置，而不是它们的属性或标签名称来选择元素。在伪类选择器中，:nth-child、:last-child、:first-child、:nth-of-type()是其中比较常用的几个。
【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-20 5764
一、CSS3 结构伪类选择器 二、E:first-child / E:last-child 选择器 1、E:first-child 选择器 2、E:last-child 选择器 三、E:nth-child(n) 选择器 1、E:nth-child(n) 选择器语法说明 2、n 为数字的情况 3、n 为关键字的情况 4、n 为公式的情况 5、子元素类型不同的情况 四、E:first-of-type / E:last-of-type / E:nth-of-type 选择器
jQuery中:first-child选择器用法实例
10-24
`:first-child`选择器的目的是匹配那些在其父元素内部处于首位的元素。 首先，让我们来看看`:first-child`选择器的基本语法： ```javascript $:first-child ``` 这意味着我们可以使用这个选择器与其它选择器（如...
css选中父元素下的第一个子元素(:first-child)
11-19
在CSS（层叠样式表）中，`:first-child`伪类选择器是一个非常有用的工具，它允许我们选择并应用样式给父元素下的第一个子元素。然而，在实际使用中，可能会出现一些误解，导致预期效果与实际效果有所偏差。本文将...
jQuery中:last-child选择器用法实例
10-24
这个选择器可以与其他选择器一起使用，如类选择器、ID选择器或者元素选择器，以实现更具体的定位。例如，如果我们想要选择所有`<li>`元素中最后一个子元素，并将其字体颜色设为蓝色，我们可以这样写： ```...
CSS中的:first-child和:last-child作用不显示的问题（解决方法）
weixin_49122171的博客
10-03 2122
CSS中的:first-child和:last-child作用不显示的问题（解决方法）
css first-child伪类选择器详解
热门推荐
weixin_44607531的博客
01-26 1万+
三种使用情况 p:first-child 选中同级第一个并且为p的元素 p:first-child em 选中同级第一个并且为p的元素下的em元素 p em:first-child 选中所有p元素下，同级第一个且为em的元素 first-child 代码 <style> p:first-child{ /* 同级第一个并且为p的元素 */ color: red; } </style> <body> ...
css first-child 和 first-of-type 的区别
zhongmei121的专栏
03-26 2277
p:first-child 表示p元素的父元素的第一个子元素 p:first-of-type表示所有p元素的第一个p元素
vue3 :first-child和:last-child的使用
smileKH的博客
04-07 930
first-child和:last-child的巧妙使用。这个实现例子虽然简单，但是对于小白来说，还是要一点时间去理解的，希望能帮助到您！
css不是第一个child,css中first-child和last-child不生效
weixin_39970166的博客
08-03 1120
html 代码v-if="userInfo.url" />style="backgroundColor:#87d068" icon="user" />v-if="!hasUserInfos()"@click="login">登录v-for="(item, index) in userInfo.infos":key="index">{{item.title}}：{{item....
css伪类first-child,last-child,写在当前要选择的标签上
最新发布
Frank_colo的博客
09-05 118
【代码】css伪类first-child,last-child,写在当前要选择的标签上。
:first-child() :last-child() :nth-child()使用的注意事项
weixin_41671709的博客
09-07 543
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
一分钟理解:first-child :first-of-type,看完还不会 打我
qq_34297738的博客
08-11 2591
css伪类:first-child :first-of-type，一分钟理解:first-child :first-of-type,看完还不会 打我
[CSS] first-child选择器的一点理解
weixin_43261523的博客
05-22 6071
在W3school上的解释是这样的： first-child选择器：选择属于其父元素的首个子元素的每个<p>元素，并为其设置样式： p:first-child { background-color: yellow; } 这很容易产生一种误解，认为p:first-child是选中p元素的第一个子元素。 举例说明： <div> <p>标题1的第一段</p> <p>标题1的第二段</p> </div>
CSS 复合选择器与特性
weixin_45768538的博客
04-24 445
（二）CSS 复合选择器与特性 1. Emmet 语法 快速生成 HTML 结构代码 快速生成 CSS 样式代码 2. 复合选择器 由基础选择器组合而成。 后代选择器 子选择器 并集选择器 伪类选择器 2.1 后代选择器（重要） 后代选择器又称为包含选择器，可以选择父元素里的子元素。写法是将外层标签写在前面，内层标签写在后面，中间空格分开。 语法 元素1 元素2 { 样式声明; } 上述语法表示选择元素 1 里面所有的元素 2 可以连续嵌套，比如可以是孙子等 元素 1、2 可以是任何基础标签
:first-child 和:first-of-type
07-28
:first-child选择器匹配其父元素中的第一个子元素。例如，如果我们有以下CSS代码： p:first-child { background-color: yellow; } span:first-child { background-color: yellow; } 那么它将选择所有p元素和span元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值