如何使用 CSS 选择器精准选取目标元素之前的所有同级元素-html教程-PHP中文网

如何使用 CSS 选择器精准选取目标元素之前的所有同级元素

本文介绍在 DOM 操作中，利用 CSS 选择器的 :not() 与通用兄弟组合器 ~ 配合，高效选取指定元素（如分隔符）之前的所有同级元素，适用于 node-html-parser 等解析场景。

本文介绍在 dom 操作中，利用 css 选择器的 `:not()` 与通用兄弟组合器 `~` 配合，高效选取指定元素（如分隔符）之前的所有同级元素，适用于 `node-html-parser` 等解析场景。

在实际 HTML 解析任务中（例如使用 node-html-parser 处理静态文档），常需定位某个标志性节点（如样式特殊的分隔符

）之前的全部同级元素。传统遍历方式虽可行，但代码冗长且易出错；而现代 CSS 选择器提供了更简洁、声明式的解决方案。

核心技巧在于组合使用两个关键特性：

通用兄弟选择器 ~：匹配位于某元素之后的所有同级元素（不包括自身）；
否定伪类 :not()：排除满足特定条件的元素。

因此，.item:not(.divider ~ .item) 的含义是：
✅ 选中所有 .item 元素；
❌ 但排除那些位于 .divider 之后的 .item（即 .divider ~ .item 匹配的部分）；
→ 最终结果即为 .divider 之前的所有 .item 元素。

示例 HTML 结构如下：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

<div class="content">
  <div class="item">0</div>
  <div class="item">1</div>
  <div class="divider">DIVIDER LOLZ</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

对应 JavaScript（兼容 node-html-parser 的 querySelectorAll）：

const itemsBeforeDivider = document.querySelectorAll('.content > .item:not(.divider ~ .item)');
itemsBeforeDivider.forEach(item => console.log(item.outerHTML));
// 输出：
// <div class="item">0</div>
// <div class="item">1</div>

⚠️ 注意事项：

该方案要求目标分隔符具有唯一可识别的选择器（如 .divider 类名），若仅依赖内联样式（如原问题中的 style="..."），则无法用纯 CSS 选择器定位，此时需改用 JavaScript 遍历 + previousElementSibling；
:not() 中的复杂选择器（如 .divider ~ .item）在现代浏览器及 node-html-parser@v6+ 中均被完整支持，但低版本解析器可能不兼容，请确认环境；
选择器必须限定作用域（如 .content > .item），避免误选嵌套子树中的 .item；
若存在多个 .divider，该选择器将排除所有 .divider 之后的 .item，即返回首个 .divider 之前的所有 .item —— 如需按每个分隔符分段提取，应改用 Array.from(document.querySelectorAll('.divider')) 循环处理。

总结：借助 :not(A ~ B) 模式，我们以零逻辑判断、高可读性的方式实现了“选取某元素之前同级节点”的常见需求，是结构化 HTML 解析中的实用范式。