first-child和first-of-type的区别

最新推荐文章于 2024-10-04 11:27:51 发布
最新推荐文章于 2024-10-04 11:27:51 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liulei21/article/details/82875776
版权

从字面上就很容一理解first-child是结构上的第一个孩子而first-of-type是相同类型的第一个

下面来举例子说明下

<div>

<h2></h2>

<p></p>//通过P：first-of-type可以得到这个元素

<p></P>

</div>

下面是first-child

<html>
<head>
<style>
li:first-child
{
background:yellow;
}
</style>
</head>

<body>

<ul>
  <li>咖啡</li>//它属于父元素的第一个孩子，而且是li标签所以它的背景颜色变为黄色
  <li>茶</li>
  <li>可口可乐</li>
</ul>

<ol>
<p>fgdhfjh</p>
  <li>咖啡</li>//它在结构上不是第一个所以它的背景颜色不会变为黄色
  <li>茶</li>
  <li>可口可乐</li>
</ol>

<p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>。</p>

</body>
</html>

追根溯源
关注
CSS选择器之first-of-type 和 first-child 比较
wuChiSha的博客
03-13 1524
一、概念 A&gt;B :first-child ：父元素下的第一个子元素 为A标签的第一个孩子（first-child）B设置样式，若A标签的第一个孩子是B标签，则设置成功，否则（A的第一个孩子不是B），则失败，即该CSS失效 A &gt; B:first-of-type：父元素下的某个类型的第一个子元素 为A标签的孩子们中，第一个为B标签（...
:first-child和:first-of-type的区别
weixin_46305214的博客
03-04 9428
:first-child选择器和:first-of-type选择器的区别 :first-child 选择器匹配其父元素中的第一个子元素。 :first-of-type* 选择器匹配元素其父级是特定类型的第一个子元素。 p:first-of-type是所以特定类型p的第一个子元素；只要是该类型元素的第一个就行了，不要求是是第一个子元素了 ** span:first-child 匹配的是某父元素的...
一分钟理解:first-child :first-of-type,看完还不会 打我
qq_34297738的博客
08-11 3499
css伪类:first-child :first-of-type，一分钟理解:first-child :first-of-type,看完还不会 打我
解释first-child与first-of-type的区别是什么？
最新发布
csdn_Levy的博客
10-04 298
都是CSS中的伪类选择器，用于选中某些特定的元素。：这个选择器会选中其父元素的第一个特定类型的子元素。元素在其兄弟元素中的位置如何。选择器将不会选中任何元素，因为。会选中每个父元素的第一个。选择器，那么会选中第一个。
伪类选择器:first-child与:first-of-type区别
t1220130004的博客
12-06 667
1、:first-chlid,先找到所有标签里的第一个标签，再进行匹配，例如： 结果：第一个先找到中的第一个孩子标签；第二个找标签中的第一个孩子，，不作用于页面。第三个找标签的第一个孩子，标签；第四个找标签的第一个孩子，标签。最后进行匹配，样式里的p与找到的标签匹配，匹配成功就作用，匹配不成功就不
firstChild和firstElementChild
fuxiaomi2016的博客
12-20 1006
第一个子节点
CSS3的first-child选择器实战攻略
09-24
学习和掌握`:first-child`、`:first-of-type`以及其他类似选择器的用法，不仅能够提高我们开发效率，也能让网页的布局表现更加丰富和准确。同时，在实际应用中，考虑浏览器兼容性是非常重要的一个环节，尤其是在老旧...
:first-child 和 :first-of-type的区别
weixin_46215920的博客
10-12 499
:first-child 和 :first-of-type 的区别 xxx:first-child 指 css 选择器匹配到 xxx 的元素中位于其父元素第一位的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
first-child和first-of-type
03-16
first-child和first-of-type都是CSS选择器中的伪类，用于选择元素中的第一个子元素。 first-child选择器选择的是父元素的第一个子元素，无论这个子元素是什么类型的元素。 而first-of-type选择器则是选择父元素中...
:first-child 和:first-of-type
07-28
:first-child和:first-of-type是CSS选择器中的两个不同的选择器。 :first-child选择器匹配其父元素中的第一个子元素。例如，如果我们有以下CSS代码： p:first-child { background-color: yellow; } span:first-...
first-child first-of-type 详解
qq_44978147的博客
02-14 317
first-child： 选择指定父元素里面的第一个子元素，比如下面的代码： ul>li:first-child <ul> <li id="1"></li> <li id="2"></li> </ul> <ul> <li id="3"></li> <li id="...
first-child与first-of-type的区别（建议使用first-of-type）
不要和代码过不去
09-07 705
first- of-type匹配的是该类型的第一个元素，类型就是指冒号前面匹配到的元素，并不限制是第一个子元素，只要是该类型元素的第一个即可。当然，这些元素的范围都属于同一级，也就是同辈。first-child匹配的是父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-child和:first-of-type的区别（:first-child选择无效）
qq_29207823的博客
08-24 3153
使用:first-child发现选择不起效，网上查了发现自己对:first-child和:first-of-type区别的认识不到。 :first-child   匹配父元素的第一个子元素E。 &lt;ul&gt; &lt;li&gt;列表项一&lt;/li&gt; &lt;li&gt;列表项二&lt;/li&gt; &lt;li&gt;列表项三&lt;/li&gt; &lt
深入理解CSS中的:first-child与:first-of-type选择器
My_wife_QBL的博客
07-11 1399
选择作为其父元素的第一个子元素的元素。：选择作为其父元素的第一个指定类型的子元素的元素。和是CSS中常用的伪类选择器，它们在选择元素时具有不同的行为和应用场景。理解这些区别有助于开发者在实际项目中选择合适的选择器来实现所需的样式效果。：适用于需要选择父元素的第一个子元素的场景，但需要注意它必须是父元素的第一个子元素。：适用于需要选择父元素中同类型子元素中的第一个的场景，可以跨越不同类型的子元素。希望本文能为大家提供一个清晰的理解和实用的指导，帮助大家在实际开发中更好地应用和选择器。
解析first-of-type与first-child的区别
2302_76543887的博客
05-26 704
可以发现具有class = "s1"的标签匹配到了,,三个标签,将其父元素下的所有,,看成有序的集合(只包括有class="s1"的标签),每个集合中的第一个这种标签(即有class= "s1"匹配到的标签)背景颜色会发生改变,如果第一个匹配到的该标签,没有class="s1"属性,那么css样式则不会应用!这是因为first-child选到的是该表签的父级元素下的第一个元素(绝对定位,而非像first-of-type那样是在同一标签中第一个元素)
css选择器:first-child和:first-of-type的差别
chenwf
08-14 547
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。 :first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。 &lt;div&gt; ...
jQuery中的小知识：first-child和first-of-type的区别
Aubergines的专栏
06-05 1688
first-child和first-of-type的区别
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值
>