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

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

本文介绍在 dom 操作中，如何利用 css 选择器（特别是 :not() 与通用兄弟选择器 ~ 的组合）高效选取目标元素之前的所有同级兄弟元素，适用于 node-html-parser 等解析库及原生浏览器环境。

本文介绍在 dom 操作中，如何利用 css 选择器（特别是 :not() 与通用兄弟选择器 ~ 的组合）高效选取目标元素之前的所有同级兄弟元素，适用于 node-html-parser 等解析库及原生浏览器环境。

在实际 HTML 解析或 DOM 遍历场景中，常需提取“某个标志性节点（如分隔符）之前的所有同类元素”。例如，在如下结构中：

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

目标是仅获取

之前的所有 .item 元素（即 0 和 1），而非全部 .item。

核心技巧：利用 CSS 选择器的排除逻辑
CSS 中 ~（通用兄弟选择器）匹配位于某元素之后的所有同级兄弟；而 :not() 可排除满足特定条件的元素。因此，.item:not(.divider ~ .item) 的含义是：
✅ 选中所有 .item 元素；
❌ 排除那些位于 .divider 之后的 .item（即 .divider ~ .item 所匹配的部分）；
→ 剩余即为 .divider 之前的所有 .item。

对应代码（兼容 node-html-parser 和浏览器环境）：

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

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

下载

// 使用 node-html-parser 示例
const { parse } = require('node-html-parser');
const html = `
  <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>
`;
const root = parse(html);

// 注意：node-html-parser 支持大部分标准 CSS 选择器，但需确保目标元素有明确 class
const itemsBeforeDivider = root.querySelectorAll('.content > .item:not(.divider ~ .item)');
itemsBeforeDivider.forEach(item => console.log(item.toString()));
// 输出：
// <div class="item">0</div>
// <div class="item">1</div>

关键注意事项：

✅ 选择器必须基于同级关系：.item 和 .divider 必须是同一父容器下的直接子元素（或至少同级），否则 ~ 无法正确关联；
✅ 推荐为分隔符添加语义化 class（如 .divider），避免依赖内联样式（如原问题中无 class 的 div），提升可维护性与选择器可靠性；
⚠️ node-html-parser 版本需 ≥ 5.0（较新版本对复杂选择器支持更完善），旧版可能不支持 :not() 嵌套选择器，此时建议改用遍历逻辑（如 parentNode.children + Array.from().indexOf() + slice()）；
? 若分隔符非唯一，该选择器将排除所有 .divider 后的 .item（即取首个 .divider 之前的所有 .item），符合多数业务预期。

总结：无需手动遍历或计算索引，一条精炼的 CSS 选择器即可声明式地表达“目标元素前的所有同类兄弟”，兼具简洁性、可读性与执行效率。