本文介绍如何使用纯 CSS 选择器精准匹配某个元素（如 <h1>）之后 DOM 中所有指定类型元素（如 <p>），无论它们是同级后续兄弟、嵌套在后续兄弟内部，还是深层后代。
本文介绍如何使用纯 css 选择器精准匹配某个元素（如 `
`）之后 dom 中所有指定类型元素（如 `
`），无论它们是同级后续兄弟、嵌套在后续兄弟内部，还是深层后代。
在 CSS 选择器中，~（通用兄弟选择器）仅能选取同级且位于其后的兄弟元素，而 +（相邻兄弟选择器）只能选紧邻的下一个兄弟——二者均无法覆盖嵌套结构。例如，h1 ~ p 只能匹配与 <h1> 同级且在其之后的 <p>，却无法命中 <div><p>Paragraph 4</p></div> 这类嵌套在后续兄弟容器中的段落。
要真正实现“<h1> 之后所有 <p> 元素”（即 DOM 顺序上出现在 <h1> 闭合标签之后的所有 <p>，无论层级深浅），需组合使用两个互补的选择器：
h1 ~ p, /* 同级后续兄弟中的 p */ h1 ~ * p /* 后续兄弟及其任意后代中的 p */
✅ 第一条 h1 ~ p 覆盖直接同级的后续 <p>（如 “Paragraph 3”）；
✅ 第二条 h1 ~ * p 利用 * 匹配 <h1> 之后任意同级元素（<div>、<span> 等），再通过空格关系选取其所有 <p> 后代（包括 “Paragraph 4” 和 “Paragraph 5”）。
⚠️ 注意事项：
- h1 ~ * p 并非低效——现代浏览器对 * 在此上下文中的解析已高度优化，实际性能影响可忽略；
- 不可写作 h1 ~ * > p（仅限直接子元素），否则会漏掉多层嵌套（如 span > div > p）；
- 此方案纯 CSS、无需 JavaScript 或 Nokogiri，兼容所有支持 CSS3 的浏览器（Chrome 1+, Firefox 3.5+, Safari 3.1+, Edge 12+）；
- 若需在 Ruby/Nokogiri 中实现同等逻辑，可使用 XPath：//h1/following::p，它原生支持 DOM 顺序遍历（following:: 轴），比 CSS 更语义准确。
综上，h1 ~ p, h1 ~ * p 是兼顾简洁性、兼容性与完整性的最佳纯 CSS 解决方案，适用于任何“目标元素之后全部某类型元素”的场景。
立即学习“前端免费学习笔记（深入）”；
