如何用优先级逻辑组合CSS选择器组实现元素筛选？

原生CSS选择器并不支持你设想的那种“共享前缀+分组条件”的简写语法，必须将共同的属性选择器前缀重复写在每个或条件的分支里。

正确的选择器写法 #

你需要把逻辑拆分为两个完整的选择器，用逗号分隔（代表“或”关系）：

const elements = document.querySelectorAll(
  '[data-attr1="a"][data-attr2="b"][data-attr3*="c"], [data-attr1="a"][data-attr2="b"][data-attr4*="d"]'
);

优化重复前缀的简洁写法 #

虽然原生选择器不支持共享前缀，但可以用JS变量拼接来避免重复书写，提升维护性：

// 定义共同前缀
const baseSelector = '[data-attr1="a"][data-attr2="b"]';
// 拼接完整选择器
const fullSelector = `${baseSelector}[data-attr3*="c"], ${baseSelector}[data-attr4*="d"]`;
// 执行筛选
const elements = document.querySelectorAll(fullSelector);

如果是在CSS样式表中编写规则（而非JS中筛选元素），可以利用CSS嵌套语法（目前主流浏览器已支持）来简化写法：

[data-attr1="a"][data-attr2="b"] {
  &[data-attr3*="c"], &[data-attr4*="d"] {
    /* 这里写元素样式 */
  }
}

不过这种嵌套语法无法直接在querySelectorAll中使用，JS筛选仍需展开为完整的逗号分隔选择器。

内容的提问来源于stack exchange，提问作者Luca Reghellin