本文详细介绍了CSS选择器的四种类型：基础选择器、属性选择器、组合选择器和伪选择器，以及它们在网页元素定位中的应用。同时，还阐述了Xpath语法，包括路径表达式和各种选择器，用于更精确地选取HTML或XML文档中的节点。这些知识对于网络爬虫开发者来说至关重要，能够帮助他们有效地抓取和解析网页内容。
1.1.1 CSS选择器
CSS即层叠式样表，主要用于html文档的样式化与布局，具体设计字体，颜色，编辑和高级定位等。CSS Selector，即CSS选择器，是用于匹配元素(Elements)的一种模式。在网络爬虫中，常使用CSS选择器，定位HTML文档中的元素，进而抽取HTML文档中的相应字段，下面将分别介绍4类CSS选择器。
1.基础选择器
基础选择器包括类别选择器，标签选择器，id选择器和通用元素选择器，如下图所示
| 选择器 | 描述 | 案例 | 含义 |
| .class | 类别选择器 | .intro | 匹配class='intro'的所有元素 |
| element | 标签选择器 | p | 匹配标签为为<p>的元素 |
| #id | id选择器 | #navsecond | 选择id="navsecond" |
| * | 通用元素选择器 | * | 选择所有元素 |
2.属性选择器
属性选择器允许用户自定义属性名称，而不仅限于基础选择器中的id，name属性。如下图所示
| 选择器 | 含义 |
| [attribute] | 选择带有title属性的所有元素 |
| [^attribute] | 利用属性前缀查找元素，例如，查找属性前缀为titl的所有元素 |
| [attribute='value'] | 选择title='CSS'教程的所有元素 |
| [attribute~='value'] | 选择title属性包含'CSS'的所有元素，这种方式也用于正则匹配 |
| [attribute^='value'] | 选择title属性最前面为'CSS'的所有元素 |
| [attribute&='value'] | 选择title属性最后面为'CSS'的所有元素 |
另外属性选择器，也可以制定具体标签属性，使用方式是在方括号前加上标签名称，案例如下
div[attribute]
div[^attribute]
3.组合选择器
为了匹配特定的元素，有时需要组合使用不同的选择器，组合选择器包括多元素选择器，后代选择器，子代选择器，兄弟选择器，直接相邻兄弟选择器和任意组合选择器，如下图所示
| 选择器 | 描述 | 案例 | 含义 |
| element,element | 多元素选择器，以逗号分隔 | div,p | 选择所有<div>元素和所有<p>元素 |
| ancestor child | 后代选择器(查找某个元素下的子元素，用空格分离) | div p | 匹配<div>元素内部的所有<p>标签元素 |
| parent>child | 子代选择器(查找某个父元素下的直接子元素) | div.content>p | 查找div[class="content"]下一层<p>元素 |
| siblingA~siblingX | 兄弟选择器 | div~p | 选择<div>元素之后的所有同级<p>元素 |
| siblingA+siblingB | 直接相邻兄弟选择器 | div+p | 选择<div>元素之后的下一个同级<p>元素 |
4.伪选择器
伪选择器，以冒号为前缀。下表列举了一些伪选择器
| 选择器 | 描述 | 案例 | 含义 |
| :lt(n) | 查找同级索引值小于n的元素 | td:lt(3) | 小于3列的元素 |
| :gt(n) | 查找同级索引值大于n的元素 | div p:gt(2) | <div>中有包含2个以上的<p>元素 |
| :eq(n) | 查找同级索引值与n相等的元素 | form input:eq(1) | <form>中包含1个<input>标签的元素 |
| :has(selector) | 匹配包含某元素的元素 | div:has(p) | 查找包含<p>元素的<div>元素 |
| :not(selector) | 查找与选择器不匹配的元素 | div:has(p) | 不包含<p>元素的所有<div>元素 |
| :contains(text) | 查找包含指定文本的元素 | p:contains(java) | 包含jjava文本的所有<p>元素 |
| :nth-child(n) | 查找某父元素下的第n个子元素 | div:nth-child(5) | 某父元素下的5个<div>元素 |
5.1.2 Xpath 语法
在网络爬虫中，常用的Xpath语法定位所要解析的内容，Xpath语法使用路径表达式来选取HTML或XML文档中的节点或节点集合，其中，节点可以是元素，属性，注释和文本等内容，Xpath语法如下所示
| 表达式 | 描述 | 案例 | 案例含义 |
| nodename | 选取此节点的所有节点 | body | 选择<body>元素中的所有子节点 |
| / | 从根节点选取 | /html | 选取根节点<html> |
| // | 从选择的当前节点选择文档中的节点，而不考虑它们的位置 | //div | 选取所有<div>节点，而不管它们在的文档位置 |
| . | 选择当前节点 | ./p | 选取当前的<p>节点 |
| @ | 选取属性 | //a[@href] | 选取所有拥有属性href的<a>节点 |
| @ | 选取属性 | //div[@id='course'] | 选取id为course的所有<div>节点 |
在使用Xpath语法解析HTML文件时，通常需要组合使用下图所示语法
| 案例 | 案例含义 |
| //div[@id='w3school']/h1 | 选取所有id属性为w3school的<div>节点下的<h1>节点 |
| //body/a[1] | 选取<body>下第一个<a>节点 |
| //body//a[last()] | 选取<body>下的最后一个<a>节点 |
410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
