当前位置：首页 > news >正文

6.5.3 软件-＞W3C HTML5、CSS3标准（W3C Recommendation）：Selector网页选择器

news 2026/3/27 5:00:32

网页中的 Selector（选择器）是一套标准化的语法规则，用于精准定位 HTML/XML 文档中的任意元素（如按钮、文本、图片、表单等），它是前端开发（CSS/JS）、爬虫开发（数据提取）的核心工具，主流分为CSS 选择器（最常用）和XPath 选择器（功能更强），下面分模块详细讲解

核心分类：CSS 选择器

CSS 选择器是网页开发 / 爬虫中最基础、最常用的 selector，语法简洁、兼容性好，被浏览器、JS、BeautifulSoup/Scrapy 等工具全面支持

基础选择器（最常用）

选择器类型	语法	含义	示例	匹配结果
ID 选择器	`#id值`	匹配 id 属性等于指定值的元素（唯一）	`#username`	`<input id="username">`
类选择器	`.class值`	匹配 class 属性包含指定值的元素	`.btn`	`<button class="btn submit">`
标签选择器	`标签名`	匹配所有指定标签的元素	`div`	所有`<div>`标签
通配选择器	`*`	匹配所有元素（慎用，性能低）	`*`	页面中所有 HTML 元素
属性选择器	`[属性名]`	匹配包含指定属性的元素	`[href]`	所有带`href`属性的元素（如`<a>`）

基础示例（可直接运行）

<!DOCTYPE html> <html> <body> <div id="box1" class="container">盒子1</div> <div class="container">盒子2</div> <a href="https://baidu.com">百度</a> <style> /* ID选择器：匹配id=box1的元素，设为红色 */ #box1 { color: red; } /* 类选择器：匹配所有class=container的元素，设字体大小20px */ .container { font-size: 20px; } /* 属性选择器：匹配带href的元素，设为蓝色 */ [href] { color: blue; } </style> </body> </html>

复合选择器（组合规则）

通过组合基础选择器，实现更精准的定位，是实际开发中最常用的方式

组合类型	语法	含义	示例	匹配结果
后代选择器	`A B`	匹配 A 元素内部的所有 B 后代元素	`#box1 p`	`#box1`内的所有`<p>`标签
子元素选择器	`A > B`	匹配 A 元素的直接子元素 B（仅一级）	`.container > div`	`.container`直接子节点的`<div>`
相邻兄弟选择器	`A + B`	匹配 A 元素后紧邻的同级 B 元素	`h1 + p`	`<h1>`后面第一个`<p>`
通用兄弟选择器	`A ~ B`	匹配 A 元素后所有同级 B 元素	`h1 ~ p`	`<h1>`后面所有`<p>`
多条件选择器	`A,B,C`	同时匹配 A、B、C 选择器的元素	`div, p, .btn`	所有`<div>`、`<p>`、`.btn`元素

复合示例

/* 匹配 id=box1 内部的 class=text 的 p 标签 */ #box1 p.text { color: green; } /* 匹配 .container 直接子元素的 a 标签，且带 href 属性 */ .container > a[href] { text-decoration: none; } /* 同时匹配 h2 和 h3 标签 */ h2, h3 { font-weight: normal; }

伪类 / 伪元素选择器（高级）

用于匹配「状态 / 位置 / 虚拟元素」，比如 “鼠标悬停的按钮”“第一个列表项”“文本首行” 等

类型	语法	含义	示例
状态伪类	`A:状态`	匹配处于指定状态的 A 元素	`button:hover`	鼠标悬停的按钮
`input:focus`	获焦的输入框
位置伪类	`A:位置`	匹配指定位置的 A 元素	`li:first-child`	第一个`<li>`标签
`tr:nth-child(2n)`	偶数行的`<tr>`标签
伪元素	`A::伪元素`	匹配 A 元素的虚拟子元素（如文本）	`p::first-line`	`<p>`文本的第一行
`div::after`	在`<div>`末尾插入虚拟内容

伪类 / 伪元素示例

/* 鼠标悬停在按钮上时，背景变蓝色 */ button:hover { background: blue; color: white; } /* 列表中第一个 li 标签，加红色边框 */ ul li:first-child { border: 1px solid red; } /* 段落文本首行加粗 */ p::first-line { font-weight: bold; }

补充：XPath 选择器（功能更强）

XPath 是 XML Path Language 的缩写，最初用于 XML 文档，也完美适配 HTML，功能比 CSS 选择器更强大（支持反向查找、复杂条件、计算等），爬虫中常用（Scrapy/Playwright 优先支持）

基础语法

语法	含义	示例	匹配结果
`/`	选取直接子节点（绝对路径）	`/html/body/div`	`<html>`→`<body>`→ 直接子`<div>`
`//`	选取所有后代节点（相对路径，常用）	`//div[@class="box"]`	所有 class=box 的`<div>`
`@`	选取属性	`//a/@href`	所有`<a>`标签的 href 属性值
`text()`	选取文本内容	`//p/text()`	所有`<p>`标签的文本
`*`	通配符，匹配任意元素	`//div/*`	所有`<div>`的子元素

高级用法

语法	含义	示例
`[@属性名="值"]`	按属性值匹配	`//input[@id="username"]`
`[position()=1]`	按位置匹配（第一个）	`//li[position()=1]`
`[contains(@class,"btn")]`	按属性包含值匹配	`//button[contains(@class,"btn")]`
`[text()="登录"]`	按文本内容匹配	`//button[text()="登录"]`
`../`	选取父节点（CSS 做不到，XPath 优势）	`//a[@href]/../div`	带 href 的`<a>`的父`<div>`

XPath 示例（爬虫常用）

# 用 Scrapy 提取数据时的 XPath 示例 # 1. 提取所有 class=title 的 h2 标签文本 response.xpath('//h2[@class="title"]/text()').extract() # 2. 提取 id=list 下的第 3 个 li 标签的 href 属性 response.xpath('//ul[@id="list"]/li[3]/a/@href').extract_first() # 3. 提取文本包含“Python”的 p 标签 response.xpath('//p[contains(text(),"Python")]').extract()

Selector 实战技巧

快速获取任意元素的 Selector（浏览器 F12）

打开网页 → 按 F12 打开开发者工具 → 切换到「Elements」标签
点击左上角「选择元素」按钮（箭头图标）→ 点击网页上的目标元素
在 Elements 面板中右键选中的元素 → Copy → 可选：
- Copy selector（CSS 选择器）
- Copy XPath（XPath 选择器）

常见坑与避坑

ID 选择器唯一性：一个页面 id 应唯一，优先用 id 定位（最精准）
类选择器多值：class="a b"时，.a或.b都能匹配，无需写全
XPath 索引从 1 开始：//li[1]是第一个，不是 0
动态元素：网页加载后动态生成的元素，Selector 可能变化（爬虫需等待加载）

CSS vs XPath 怎么选？

场景	推荐选择器	原因
简单定位（id/class/ 标签）	CSS	语法简洁，易记易用
反向查找（找父 / 祖先元素）	XPath	CSS 不支持反向定位
复杂文本匹配（包含 / 模糊）	XPath	内置 contains/text () 等强大函数
前端样式 / JS 操作	CSS	浏览器原生支持，性能更好
爬虫数据提取	均可	Scrapy/BeautifulSoup 都支持，看习惯