以下是 CSS 选择器（CSS Selectors） 的完整规则汇总，适用于网页开发、爬虫（如 PyQuery、BeautifulSoup、Scrapy、Selenium 等）以及前端样式编写。
一、基础选择器（Basic Selectors）
| 选择器 | 示例 | 含义 |
|---|---|---|
* |
* |
通配符：匹配所有元素 |
标签名 |
div, p |
元素选择器：匹配指定标签的所有元素 |
.类名 |
.title |
类选择器：匹配 class="title" 的元素 |
#ID名 |
#header |
ID 选择器：匹配 id="header" 的唯一元素 |
⚠️ 注意：ID 在 HTML 中应唯一，类可以重复。
二、组合选择器（Combinator Selectors）
| 选择器 | 示例 | 含义 |
|---|---|---|
A B |
div p |
后代选择器：匹配 A 内部所有 B 元素（任意层级） |
A > B |
div > p |
子选择器：匹配 A 的直接子元素 B（仅一层） |
A + B |
h1 + p |
相邻兄弟选择器：匹配紧接在 A 后面的同级 B 元素 |
A ~ B |
h1 ~ p |
通用兄弟选择器：匹配 A 之后所有同级的 B 元素 |
三、属性选择器（Attribute Selectors）
| 选择器 | 示例 | 含义 |
|---|---|---|
[attr] |
[href] |
匹配具有 attr 属性的元素 |
[attr=value] |
[type="submit"] |
属性值完全等于 value |
[attr~=value] |
[class~="btn"] |
属性值是空格分隔的词列表，其中包含 value |
| `[attr | =value]` | `[lang |
[attr^=value] |
[href^="https"] |
属性值以 value 开头 |
[attr$=value] |
[href$=".pdf"] |
属性值以 value 结尾 |
[attr*=value] |
[href*="example.com"] |
属性值包含 value |
✅ 常用于爬虫中精准定位链接、图片等。
四、伪类选择器（Pseudo-classes）
1. 结构伪类
| 选择器 | 示例 | 含义 |
|---|---|---|
:first-child |
li:first-child |
父元素的第一个子元素 |
:last-child |
li:last-child |
父元素的最后一个子元素 |
:nth-child(n) |
tr:nth-child(2n) |
第 n 个子元素（支持公式，如 2n, odd, 3n+1） |
:nth-last-child(n) |
li:nth-last-child(2) |
从后往前数第 n 个 |
:only-child |
p:only-child |
父元素中唯一的子元素 |
:empty |
div:empty |
没有子元素（包括文本）的元素 |
2. 链接与交互伪类（主要用于 CSS 样式）
:link/:visited：未访问 / 已访问链接:hover/:active/:focus：鼠标悬停 / 激活 / 获得焦点
🕷️ 在爬虫中，结构伪类（如
:nth-child）非常有用，但部分库（如 BeautifulSoup）不支持全部伪类，PyQuery 和 Selenium 支持较好。
五、伪元素（Pseudo-elements）
| 选择器 | 示例 | 用途 |
|---|---|---|
::before |
p::before |
在元素内容前插入内容（CSS） |
::after |
p::after |
在元素内容后插入内容 |
::first-line |
p::first-line |
段落第一行 |
::first-letter |
p::first-letter |
段落首字母 |
⚠️ 伪元素主要用于 CSS 样式渲染 ，爬虫无法获取（因为它们不在 DOM 中）。
六、多条件组合
选择器可叠加使用：
/* class="movie" 且 id="top" 的 div */
div.movie#top
/* href 以 "https" 开头的 a 标签，且有 class="external" */
a.external[href^="https"]
/* 第一个 .el-card 的直接子 h2 */
.el-card:first-child > h2七、爬虫中的注意事项
| 工具 | CSS 选择器支持情况 |
|---|---|
| PyQuery | ✅ 完全支持（基于 jQuery 语法） |
| BeautifulSoup | ❌ 不原生支持；需用 select() 方法（支持大部分，但伪类有限） |
| Scrapy Selector | ✅ 支持 .css() 方法（基于 cssselect 库，支持常见选择器） |
| Selenium | ✅ 支持 find_element(By.CSS_SELECTOR, "...") |
💡 推荐在爬虫中优先使用：
.class#idtag[attr=value]parent > child:nth-child(n)
八、速查表（Cheat Sheet）
/* 基础 */
div /* 所有 div */
.title /* class="title" */
#main /* id="main" */
/* 组合 */
div p /* div 内所有 p（后代） */
div > p /* div 的直接子 p */
h1 + p /* 紧跟 h1 的 p */
h1 ~ p /* h1 后所有同级 p */
/* 属性 */
img[src] /* 有 src 的 img */
a[href^="http"] /* 链接以 http 开头 */
/* 伪类 */
li:first-child /* 第一个 li */
tr:nth-child(even) /* 偶数行 */掌握这些 CSS 选择器，无论是写样式还是做数据抓取，都能精准定位目标元素。建议结合浏览器开发者工具（F12 → Elements → Ctrl+F 输入选择器）实时测试！
jQuery 和 BeautifulSoup 等库为了提升选择器的实用性，在 CSS 官方标准之外扩展了一批非标准伪类选择器 ，这些选择器主要用于解决「文本内容匹配」「元素状态 / 属性的特殊筛选」「表单元素匹配」等官方 CSS 选择器未覆盖的场景。以下是对这些非标准伪类选择器的分类汇总，同时明确 jQuery 和 BeautifulSoup 的支持差异：
一、文本内容筛选类伪类
这类伪类基于元素的文本内容 进行匹配，是最典型的非标准扩展，核心代表是:contains()。
| 伪类选择器 | 所属库 | 作用说明 | 示例 |
|---|---|---|---|
:contains(text) |
jQuery/BeautifulSoup | 匹配文本内容包含指定字符串的元素（jQuery 区分大小写，BeautifulSoup 部分版本不敏感） | div:contains(上映) 匹配包含 "上映" 的 div |
:icontains(text) |
BeautifulSoup 独有 | 与:contains()类似，但不区分大小写匹配文本 |
p:icontains(Hello) 匹配包含 "hello"/"HELLO" 的 p |
:matches(text) |
部分解析库扩展 | 与:contains()功能一致，部分库（如 lxml）用此命名替代 |
span:matches(测试) |
二、表单元素专用伪类（jQuery 核心扩展）
jQuery 针对表单交互场景，扩展了大量表单元素筛选的伪类，BeautifulSoup 对这类伪类基本不支持（因 BeautifulSoup 聚焦静态解析，非交互场景）。
| 伪类选择器 | 所属库 | 作用说明 | 示例 |
|---|---|---|---|
:input |
jQuery | 匹配所有表单输入元素（input/select/textarea/button） | $(':input') 选中所有表单输入 |
:text |
jQuery | 匹配单行文本输入框（type="text"的 input） |
$(':text') |
:password |
jQuery | 匹配密码输入框（type="password"的 input） |
$(':password') |
:radio |
jQuery | 匹配单选按钮（type="radio"的 input） |
$(':radio') |
:checkbox |
jQuery | 匹配复选框（type="checkbox"的 input） |
$(':checkbox') |
:submit |
jQuery | 匹配提交按钮（type="submit"的 input/button） |
$(':submit') |
:reset |
jQuery | 匹配重置按钮（type="reset"的 input/button） |
$(':reset') |
:button |
jQuery | 匹配所有按钮（button 元素或type="button"的 input） |
$(':button') |
:file |
jQuery | 匹配文件上传框（type="file"的 input） |
$(':file') |
:hidden |
jQuery | 匹配隐藏元素（type="hidden"、display:none、visibility:hidden等） |
$(':hidden') |
:visible |
jQuery | 匹配可见元素（与:hidden相反） |
$(':visible') |
:enabled |
jQuery | 匹配启用的表单元素（未设置disabled） |
$(':enabled') |
:disabled |
jQuery | 匹配禁用的表单元素（设置disabled） |
$(':disabled') |
:checked |
jQuery | 匹配被选中的单选 / 复选框，也支持<option> |
$(':checked') |
:selected |
jQuery | 专门匹配被选中的<option>元素 |
$(':selected') |
三、元素状态 / 属性筛选伪类（jQuery 扩展）
这类伪类用于简化「属性存在 / 状态判断」，部分是对 CSS 标准属性选择器的封装，部分是纯扩展。
| 伪类选择器 | 所属库 | 作用说明 | 示例 |
|---|---|---|---|
:empty |
jQuery/CSS | 注：empty是 CSS 标准结构伪类，但 jQuery 增强了对文本节点的判断（如空白文本视为非空） |
$('div:empty') 匹配无内容的 div |
:has(selector) |
jQuery | 匹配包含指定子元素 的父元素（CSS 标准的:has()是后来新增，jQuery 更早实现） |
$('div:has(p)') 匹配包含 p 标签的 div |
:parent |
jQuery | 与:empty相反，匹配包含子元素（或文本）的元素 |
$('li:parent') |
:eq(index) |
jQuery | 匹配索引等于指定值的元素（索引从 0 开始） | $('li:eq(2)') 匹配第 3 个 li |
:gt(index) |
jQuery | 匹配索引大于指定值的元素 | $('li:gt(1)') 匹配索引 2 及以上的 li |
:lt(index) |
jQuery | 匹配索引小于指定值的元素 | $('li:lt(3)') 匹配索引 0-2 的 li |
:first |
jQuery | 匹配第一个元素（等价于:eq(0)） |
$('li:first') |
:last |
jQuery | 匹配最后一个元素 | $('li:last') |
:even |
jQuery | 匹配索引为偶数的元素（0、2、4...） | $('tr:even') |
:odd |
jQuery | 匹配索引为奇数的元素（1、3、5...） | $('tr:odd') |
四、BeautifulSoup 特有的扩展伪类
BeautifulSoup 基于 cssselect 库实现 CSS 选择器，除了支持 jQuery 的:contains()，还新增了部分独有的非标准伪类：
| 伪类选择器 | 作用说明 | 示例 |
|---|---|---|
:icontains(text) |
不区分大小写的文本包含匹配（弥补 jQuery:contains()区分大小写的不足） |
soup.select('p:icontains(abc)') 匹配包含 ABC/abc 的 p |
:nth-of-type(n) |
注：虽是 CSS 标准，但 BeautifulSoup 对其实现有细微调整（如支持非数字参数） | div:nth-of-type(2) 匹配第二个 div 类型子元素 |
五、关键说明：CSS 标准与库扩展的边界
- 部分伪类的 "身份转换" ：少数 jQuery 扩展伪类后来被纳入 CSS 标准，例如
:has()（jQuery 先实现，CSS4 标准正式纳入）、:empty（CSS 标准，jQuery 增强实现）。 - BeautifulSoup 的支持限制 ：BeautifulSoup 仅支持静态解析相关 的扩展伪类（如
:contains()/:icontains()），对 jQuery 的表单类伪类（如:checked/:enabled）完全不支持，因 BeautifulSoup 不处理元素的动态状态。 - 兼容性风险 ：这些非标准伪类仅在对应库的环境中生效，直接在浏览器原生
document.querySelector()中使用会报错（如浏览器不识别:contains()）。
总结
jQuery 和 BeautifulSoup 的非标准伪类选择器主要集中在文本筛选 「jQuery 独有：表单状态 / 索引筛选」「BeautifulSoup 独有：大小写不敏感文本筛选」三大类。其中，jQuery 的扩展更偏向动态交互场景 ，BeautifulSoup 的扩展则聚焦静态 HTML 解析场景。使用时需注意库的支持差异，避免在原生 CSS/JS 中直接使用这些非标准选择器。