Electron中querySelectorAll无效的CSS选择器，浏览器可正常运行

问题核心原因 #

你遇到的问题本质是Electron内置的Chromium版本不支持:has伪类选择器。虽然现代主流浏览器已支持:has，但Electron的内核更新节奏滞后，仅Electron 21及以上版本（对应Chromium 106+）才完整支持该选择器。若你的Electron版本低于此范围，必然触发无效选择器报错。另外CSSLint的报错无需理会，它的规则更新跟不上CSS新特性的迭代节奏。

可行解决方案 #

方案1：升级Electron版本

如果项目允许，直接将Electron升级到21或更高版本，即可直接使用你原本的:has选择器代码。

方案2：用JavaScript逻辑替代:has选择器

若无法升级Electron，改用JS遍历过滤的方式实现需求，兼容性更强：

// 先获取所有列元素，再过滤出包含启用状态输入框/按钮的列
const validColumns = Array.from(container.querySelectorAll('.c-col-1')).filter(column => {
  // 检查当前列是否存在启用的input或button
  return column.querySelector('input:not(:disabled), button:not(:disabled)') !== null;
});

这段代码逻辑和你原本的CSS选择器完全一致，但不依赖:has特性，能在所有支持ES6的Electron版本中正常运行。

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