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

最新推荐文章于 2024-05-26 14:56:34 发布

weixin_33758863

最新推荐文章于 2024-05-26 14:56:34 发布

阅读量89

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2518388/blog/758897

版权

2019独角兽企业重金招聘Python工程师标准>>>

first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。

转载于:https://my.oschina.net/u/2518388/blog/758897

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33758863

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
first-child和first-of-type的区别

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫

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

weixin_46215920的博客

10-12

437

: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的区别

weixin_46305214的博客

03-04

9335

:first-child选择器和:first-of-type选择器的区别 :first-child 选择器匹配其父元素中的第一个子元素。 :first-of-type* 选择器匹配元素其父级是特定类型的第一个子元素。 p:first-of-type是所以特定类型p的第一个子元素；只要是该类型元素的第一个就行了，不要求是是第一个子元素了 ** span:first-child 匹配的是某父元素的...

参与评论您还未登录，请先登录后发表或查看评论

解析first-of-type与first-child的区别

最新发布

2302_76543887的博客

05-26

425

可以发现具有class = "s1"的标签匹配到了<a>,<b>,<span>三个标签,将其父元素下的所有<a>,<b>,<span>看成有序的集合(只包括有class="s1"的标签),每个集合中的第一个这种标签(即有class= "s1"匹配到的标签)背景颜色会发生改变,如果第一个匹配到的该标签,没有class="s1"属性,那么css样式则不会应用!这是因为first-child选到的是该表签的父级元素下的第一个元素(绝对定位,而非像first-of-type那样是在同一标签中第一个元素)

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

zhongmei121的专栏

03-26

2296

p:first-child 表示p元素的父元素的第一个子元素 p:first-of-type表示所有p元素的第一个p元素

css选择器中:first-child与:first-of-type的区别

子渊的博客

05-02

224

first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。...

first-child与first-of-type的区别（建议使用first-of-type）

不要和代码过不去

09-07

601

first- of-type匹配的是该类型的第一个元素，类型就是指冒号前面匹配到的元素，并不限制是第一个子元素，只要是该类型元素的第一个即可。当然，这些元素的范围都属于同一级，也就是同辈。first-child匹配的是父元素的第一个子元素，可以说是结构上的第一个子元素。

CSS选择器之first-of-type 和 first-child 比较

wuChiSha的博客

03-13

1486

一、概念 A>B :first-child ：父元素下的第一个子元素为A标签的第一个孩子（first-child）B设置样式，若A标签的第一个孩子是B标签，则设置成功，否则（A的第一个孩子不是B），则失败，即该CSS失效 A > B:first-of-type：父元素下的某个类型的第一个子元素为A标签的孩子们中，第一个为B标签（...

first-of-type选择器

09-14

504

“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。示例演示：通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。 HTML代码：我是一个块元素，我是.wrapper的第一个子元

【CSS3】first-of-type选择器

O(∩_∩)O

02-23

536

html设置type选择器,css :first-of-type选择器实例讲解

weixin_35282584的博客

06-04

2668

css:first-of-type介绍css :first-of-type选择器用于匹配父元素的第一个特定子元素。语法：:first-of-type {style properties}如：p:first-of-type用于匹配父元素里的第一个p元素。css:first-of-type实例设置其父级的第一个p元素的背景色p:first-of-type{background:#ff0000;}T...

first-of-type，nth-of-type，last-of-type分类问题

陈亮宇的博客

04-17

598

first-of-type，nth-of-type，last-of-type分类问题

理解Jquery的first-of-type选择器

u014344668的专栏

03-17

545

理解Jquery的first-of-type选择器$(“p:first-of-type”) 选取属于其父元素的第一个 p 元素的每个p元素：实例代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>first-child选择器</title> <script src="

css3选择器first-of-type属性作用及用法剖析

aisivisual的博客

03-05

3061

在 CSS3 中，first-of-type 选择器是一种强大且实用的选择器，用于选取父元素下的第一个特定类型的子元素。通过使用 first-of-type 属性，我们可以更精确地控制样式，实现更复杂的布局和设计。

:first-child和:first-of-type的区别（:first-child选择无效）

qq_29207823的博客

08-24

3117

使用:first-child发现选择不起效，网上查了发现自己对:first-child和:first-of-type区别的认识不到。 :first-child 匹配父元素的第一个子元素E。 <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> &lt

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

灰白色

02-20

451

开发工具与关键技术：dw,html 作者：邓伟征撰写时间：2019年1月16日 first-child:所有标签的第一个子元素 first-of-type:某个标签的第一个元素我们先 first-child给h2设置，见截图可见h2并没有效果我们再用first-of-type给h2进行设置，见截图可见用first-of-type的颜色效果就出来了我们再用first-child给h1...

:first-of-type | CSS属性参考

初晴

09-19

1545

CSS :first-of-type伪类选择器用于匹配元素的所有子元素类型中第一个出现的子元素。换句话来说。:first-of-type伪类选择器匹配父元素中第一次出现的某类子元素的第一个元素，例如： article> h1>标题h1> p> 第一个段落... p> p> 第二个段落...

CSS选择器 first-child 、first-of-type 和 nth-of-type()

erciyuan_nuonuo的博客

12-11

3195

块内区域首个元素的css样式可以通过first-child、first-of-type 和 nth-of-type()实现。对于 IE8 及更早版本的浏览器中，必须声明 <!DOCTYPE>。 first-child:选择器用于选取属于其父元素的首个子元素的指定选择器 first-of-type:选择器匹配属于其父元素的特定类型的首个子元素的每个元素 nth-of-type(x):选择器匹配属于其父

first-child和first-of-type

03-16

first-child和first-of-type都是CSS选择器中的伪类，用于选择元素中的第一个子元素。 first-child选择器选择的是父元素的第一个子元素，无论这个子元素是什么类型的元素。而first-of-type选择器则是选择父元素中第一个与指定类型相同的子元素，也就是说，如果父元素中有多个相同类型的子元素，只有第一个会被选择。举个例子，如果有如下HTML代码： ``` <div> <p>第一个段落</p> <p>第二个段落</p> <span>第一个span</span> <p>第三个段落</p> <span>第二个span</span> </div> ``` 使用first-child选择器选择第一个子元素，结果是第一个段落： ``` div p:first-child { color: red; } ``` 而使用first-of-type选择器选择第一个段落，结果也是第一个段落： ``` div p:first-of-type { color: red; } ``` 但如果选择第一个span，使用first-child选择器会选择不到，因为第一个子元素是一个段落，而不是span： ``` div span:first-child { color: red; } ``` 而使用first-of-type选择器则可以选择到第一个span： ``` div span:first-of-type { color: red; } ```