CSS选择器 first-child 和 first-of-type 区别

最新推荐文章于 2024-10-01 05:04:32 发布
最新推荐文章于 2024-10-01 05:04:32 发布
阅读量122 收藏
点赞数
文章标签： python css 爬虫 数据仓库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40734108/article/details/118146691
版权
本文讲述了在网页解析中如何正确使用CSS选择器提取特定元素。通过实例展示了first-child和first-of-type的区别，前者选取父节点的第一个子节点，后者选取父节点下指定类型的第一个子节点。在提取总页数时，由于误用了first-child，导致无法获取到正确的数字，修正为first-of-type后成功提取出68这个总页数。
摘要由CSDN通过智能技术生成

先来看一下需求：

目标是提取出 68 这个总页数，我一开始用的是 first-child

response.css("#toPage li:first-child::text").re_first(r"\d+")

但是提取出来的是 None， 想了一下发现不对，form#toPage 的第一个子节点应该是 input，所以这里应该用的是 first-of-type 才对

response.css("#toPage li:first-of-type::text").re_first(r"\d+")

总结一下，就是 

first-child ：提取父节点的第一个子节点

first-of-type ：提取父节点下该种类型的子节点的第一个

2021.11.25 更新：

        节点不可以带属性值 class id 之类的

银古_1427
关注
CSS选择器之first-of-type 和 first-child 比较
wuChiSha的博客
03-13 1488
一、概念 A>B :first-child ：父元素下的第一个子元素 为A标签的第一个孩子（first-child）B设置样式，若A标签的第一个孩子是B标签，则设置成功，否则（A的第一个孩子不是B），则失败，即该CSS失效 A > B:first-of-type：父元素下的某个类型的第一个子元素 为A标签的孩子们中，第一个为B标签（...
爬虫入门到精通_框架篇18(Scrapy中选择器用法)_sector,xpath,css,re
weixin_41865866的博客
03-14 1107
sector,xpath,css,re
css3选择器first-of-type属性作用及用法剖析
aisivisual的博客
03-05 3205
在 CSS3 中，first-of-type 选择器是一种强大且实用的选择器，用于选取父元素下的第一个特定类型的子元素。通过使用 first-of-type 属性，我们可以更精确地控制样式，实现更复杂的布局和设计。
first-of-type、last-of-type选择器
justforuse的博客
03-29 340
原文链接: https://justforuse.github.io/blog/zh-cn/2020/03/last-of-type-tutorial/
CSS :first-of-type 选择器
lengqingIT的博客
03-25 173
HTML 用法 <body> <h1>:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素</h1> <h3>实例:选择的 p 元素是其父元素的第一个 p 元素</h3> <p>半暖茶港</p> <p>半暖茶港</p> <p>半暖茶港</p&...
html+js仿百度搜索框，点击和回车跳转百度搜索
集电极
10-28 4259
html+js仿百度搜索框，点击和回车跳转百度搜索 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .container { width: 500px;
css选择器之first-child和first-of-type的比较
小太阳的博客
12-17 874
定义： :first-child 选择器匹配其父元素中的第一个子元素。 :first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。 注意： ：修饰的是当前元素，比如你想选p元素下的第一个span元素，你可以 p span:first-child : {} // 或者sass写法 p { & span:first-child: {} } p:first-child: {} // 错误写法 小例子 <div> <p>我是p元素</p
css选择器:first-child和:first-of-type区别
m-dididid的博客
02-27 876
还是上面的代码，用p:first-child()去匹配是匹配不到p元素的，但是若用:first-of-type去匹配则可以匹配到p元素，因为:first-of-type要求只要是第一个出现的子元素即可。上面的代码，若用p:first-child()去匹配则匹配不到p元素，因为此时p标签不是其父元素的第一个子元素。
深入理解CSS中的:first-child与:first-of-type选择器
My_wife_QBL的博客
07-11 625
选择作为其父元素的第一个子元素的元素。：选择作为其父元素的第一个指定类型的子元素的元素。和是CSS中常用的伪类选择器，它们在选择元素时具有不同的行为和应用场景。理解这些区别有助于开发者在实际项目中选择合适的选择器来实现所需的样式效果。：适用于需要选择父元素的第一个子元素的场景，但需要注意它必须是父元素的第一个子元素。：适用于需要选择父元素中同类型子元素中的第一个的场景，可以跨越不同类型的子元素。希望本文能为大家提供一个清晰的理解和实用的指导，帮助大家在实际开发中更好地应用和选择器。
CSS3的first-child选择器实战攻略
09-24
除了`:first-child`和`:first-of-type`之外，CSS中还有一些其他类似的选择器，它们可以帮助我们更精细地控制元素的样式： - **`:last-child` 和 `:last-of-type`**：分别用于选择父元素的最后一个子元素和同类型中...
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
此外，虽然不适用于IE8，但这里也提及了一些其他CSS3选择器，如`nth-of-type()`、`:first-of-type`、`:last-of-type`、`:only-of-type`、`:nth-last-child()`和`:nth-last-of-type()`。这些选择器允许更精确地定位...
html设置type选择器,css :first-of-type选择器实例讲解
weixin_35282584的博客
06-04 2680
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...
VeighNa：强大的Python开源量化交易平台
Unity打怪升级
09-26 691
VeighNa（简称 VN 或 vn.py）是一个基于 Python 的开源量化交易平台，专为量化交易爱好者和专业交易员设计。VeighNa 是由国内开发者社区推动的开源项目，旨在提供一个功能丰富、灵活且易于扩展的量化交易解决方案。该框架不仅支持多种资产类别的交易，如股票、期货、期权、加密货币等，还支持多种交易接口和协议，使得用户能够轻松进行多市场、多品种的交易策略开发和部署。
第二百五十四节 JPA教程 - JPA 多对多映射示例
2301_78772942的博客
09-27 706
第二百五十四节 JPA教程 - JPA 多对多映射示例
python中的深浅拷贝以及总体框架了解
AgostoDu的博客
09-26 1169
1、当b使用copy.deepcopy()深拷贝的时候，可以理解为b不仅外面的整体开辟了一个新的内存地址，b里面包含的列表也开辟了新的内存地址和a里面的内存地址没有任何关系，所以当a修改里面列表元素的值时不会影响b里面列表元素的值。print(mr) #{'name': 'lis', 'age': 18, 'scroe': 100}<br>备注：已经存在的值的优先级>默认值<br>6.3 直接修改 值，显示最新修改值 （修改默认值优先级小于直接添加的字典值）<br>
Python精选200Tips：171-175
AnFany
09-26 1304
Python深度学习的项目
Python | Leetcode Python题解之第448题找到所有数组中消失的数字
最新发布
Mopes__的博客
10-01 180
Python | Leetcode Python题解之第448题找到所有数组中消失的数字
合并两个有序数组
Sudo_Wang的学习记录
09-30 379
我们可以使用双指针法从后向前遍历，避免将已经排序的数组打乱。这个方法的核心思路是从。的末尾开始填充较大的元素，因为末尾是用零填充的空闲区域，这样我们可以避免覆盖。这个方法能够高效地解决问题，并且符合进阶要求的 O(m + n) 复杂度。
numpy is not available
xfsong2012的博客
09-27 408
在测试第一个程序的时候，出现Numpy is not available的错误，根据。安装的时候，安装的是最新版的numpy，检查numpy的版本为2.1.1版。我的pytorch版本为1.12.1，选择不高于1.21的版本即可。的办法知道是因为numpy与pytorch版本不一致造成的。2、安装需要的numpy版本，比如1.21版。
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; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值