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

如何使用 CSS 选择器精准选取指定元素之前的所有同级兄弟元素

本文介绍在 JavaScript 中利用 CSS 选择器（特别是 :not() 与通用兄弟组合器 ~）高效选取目标元素之前所有符合条件的同级兄弟节点，适用于 node-html-parser 等解析场景。

本文介绍在 javascript 中利用 css 选择器（特别是 `:not()` 与通用兄弟组合器 `~`）高效选取目标元素之前所有符合条件的同级兄弟节点，适用于 `node-html-parser` 等解析场景。

在 DOM 或 HTML 解析操作中，常需定位某个特定标记（如分隔符

）之前的所有同类兄弟元素（例如所有 .item）。原生 JavaScript 提供了简洁而强大的 CSS 选择器方案，无需遍历或手动判断索引。

核心思路是：利用 ~（通用兄弟组合器）匹配“位于某元素之后的所有同级兄弟”，再通过 :not() 取反，从而精确筛选出“不在该元素之后”的目标元素。

假设 HTML 结构如下（已为分隔符添加语义化类名 .divider，便于选择）：

<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>

则可使用以下选择器一次性获取所有位于 .divider 之前的 .item 元素：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

const itemsBeforeDivider = document.querySelectorAll('.content > .item:not(.divider ~ .item)');

✅ 该选择器含义解析：

.content > .item：选取 .content 的直接子元素中所有 .item；
.divider ~ .item：选取所有位于 .divider 后方、且与之同级的 .item；
:not(.divider ~ .item)：排除上述“在分隔符之后”的 .item；
最终结果即为所有“在 .divider 之前”的 .item（本例中为 0 和 1）。

⚠️ 注意事项：

.divider 必须存在且具有唯一可识别的类名（如示例中的 .divider），否则选择器无法准确定位上下文；

该方法依赖 CSS 选择器逻辑，不适用于 node-html-parser 的默认 CSS 选择器引擎（其 v6.x 之前版本对 ~ 和 :not() 组合支持有限）；若使用 node-html-parser，建议升级至 v7+ 版本，或改用 querySelectorAll + 手动遍历（如 Array.from(el.parentNode.children).slice(0, index)）作为兼容 fallback；

若分隔符无固定类名（如仅靠内联样式或文本内容识别），需先通过 querySelector 定位分隔符节点，再结合 previousElementSibling 循环收集兄弟节点。

总结：CSS 选择器 :not(X ~ Y) 是一种声明式、高性能的“前序兄弟筛选”方案，适用于现代浏览器及兼容良好的解析器。合理设计语义化类名，并理解 ~ 与 :not() 的作用域关系，是写出健壮选择器的关键。