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

9334

: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的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。...

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标签（...

CSS3的first-child选择器实战攻略

09-24

学习和掌握`:first-child`、`:first-of-type`以及其他类似选择器的用法，不仅能够提高我们开发效率，也能让网页的布局表现更加丰富和准确。同时，在实际应用中，考虑浏览器兼容性是非常重要的一个环节，尤其是在老旧...

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的区别（建议使用first-of-type）

不要和代码过不去

09-07

601

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

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

597

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

3058

在 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