属性名称模式的 JavaScript/CSS 选择器

Question

假设我有以下标记

<div data-common-notcommon="anyValue">
    <!-- Whatever.. -->
</div>

<div data-common-not-commonerthing="anyValue">
    <!-- Whatever.. -->
</div>

我正在尝试编写一个 JS 选择器(或 CSS 选择器，不关心差异..)来根据常见的部分属性名称查找属性。

即我想查找以 data-common 开头的所有元素。

我在 Google 上找不到任何有关属性名称选择器的信息，而是找到了我并不真正想做的属性值选择器。

<script>
  document.querySelectorAll('[data-common]'); // []
  document.querySelectorAll('[data-common*]'); // []
  // etc..
</script>

Answer 1

当前没有定义用于部分匹配属性名称的选择器。您所要求的内容不存在。

对于 JavaScript，您可以使用自定义代码过滤元素集合(这就是 jQuery 所做的)，但它不适用于 document.querySelectorAll，也不能为 CSS 定义自定义选择器，除非您愿意在 w3c 邮件列表上建议它并处理涉及更改 CSS 语言的复杂工作流程。