是否有 CSS 选择器来选择具有数字作为 id 的 div

Question

我想在 HTML 页面中选择一些 id 属性包含数字的 div。我想不出一个 CSS 选择器。我应该遍历所有 div 并测试它们的 id 属性还是有一个神奇的 CSS 选择器。

...
<div id="56142307907">...</div>
...
<div id="58308926711">...</div>
...

注意

首选仅 JS 的解决方案

Answer 1

没有。

如果你查看the specification，你会发现最接近的就是各种属性选择器，但它们只匹配精确的字符串或子字符串。

既然你提到了 JS，最简单的方法可能是获取所有带有 id 的 div，然后过滤它们。

const regex = /^\d+$/;
const filter = element => regex.test(element.id);
const divs_with_ids = document.querySelectorAll("div[id]");
const divs_with_numeric_ids = Array.from(divs_with_ids).filter(filter);
console.log(divs_with_numeric_ids);

<div></div>
<div id="134"></div>
<p id="234"></div>
<div id="13d4"></div>
<div id="54354"></div>
<div id="5643f"></div>
<div id="454354"></div>

Answer 2

你可以用纯 CSS 来做...

...如果您非常下定决心。

---

可用字符

HTML4 spec 说：

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0- 9])、连字符（“-”）、下划线（“_”）、冒号（“:”）和句点（“.”）。

HTML5 扩大了可用字符池：

id 属性值在元素树的所有 ID 中必须是唯一的，并且必须包含至少一个字符。该值不得包含任何 ASCII 空格。

---

解决方案

我将继续假设您在 DOM 中仅使用字母、数字和 -_:. 作为 ID。如果您需要更紧凑的选择器，只需添加更多元素即可。

所以...这是符合上述条件的怪物选择器：

div[id^='0']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='1']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='2']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='3']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='4']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='5']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='6']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='7']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='8']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='9']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.'])

div {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  margin: 0.5rem;
  border: 3px solid transparent;
  border-radius: 0.5rem;
  font-family: sans-serif;
  font-size: 12pt;
  width: 20rem;
  background-color: #ddf;
}

div[id^='0']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='1']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='2']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='3']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='4']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='5']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='6']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='7']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='8']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='9']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']) {
  border-color: black;
}

<div id="1">id: 1</div>
<div id="23">id: 23</div>
<div id="345">id: 345</div>
<div id="4567">id: 4567</div>
<div id="56789">id: 56789</div>
<div id="12345-6789">id: 12345-6789</div>
<div id="0123-some-text-here-4567">id: 0123-some-text-here-4567</div>
<div id="000-starts-with-digits">id: 000-starts-with-digits</div>
<div id="ends-with-digits-321">id: ends-with-digits-321</div>
<div id="only-text">id: only-text</div>
<div>(id is not provided)</div>
<div id>(id has no value)</div>
<div id="">(id is an empty string)</div>

---

说明

CSS 允许通过属性值来选择元素。 The syntax 包含一个 [attr*=value] 选择器，可用于检查子字符串。

通过链接该选择器，并用:not() 包围，可以过滤掉所有不需要的值。

请注意，每个组合选择器都以 [id^='digit'] 开头，从 0 到 9。没有它，它可以匹配具有空 id 的元素。通过指定字符串以数字开头，适当的元素会被过滤掉。

---

稍微简单的方法

您可以使用短十倍的选择器，但它会选择具有空 id 的元素，即 <div id></div> 和 <div id=""></div>。如果你不介意缺点，你可以使用这个：

div[id]:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*='.']):not([id*=':'])

div {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  margin: 0.5rem;
  border: 3px solid transparent;
  border-radius: 0.5rem;
  font-family: sans-serif;
  font-size: 12pt;
  width: 20rem;
  background-color: #ddf;
}

div[id]:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*='.']):not([id*=':']) {
  border-color: black;
}

<div id="1">id: 1</div>
<div id="23">id: 23</div>
<div id="345">id: 345</div>
<div id="4567">id: 4567</div>
<div id="56789">id: 56789</div>
<div id="12345-6789">id: 12345-6789</div>
<div id="0123-some-text-here-4567">id: 0123-some-text-here-4567</div>
<div id="000-starts-with-digits">id: 000-starts-with-digits</div>
<div id="ends-with-digits-321">id: ends-with-digits-321</div>
<div id="only-text">id: only-text</div>
<div>(id is not provided)</div>
<div id>(id has no value)</div>
<div id="">(id is an empty string)</div>

Answer 3

没有这样的选择器可以处理具有数值的 id。 但是，您可以使用 data-id。

例如，您的 div 如下所示-

<div id="12345"></div>

给它添加一个 data-d 属性，让它看起来像-

<div id="12345" data-id="12345"></div>

然后在 data 属性上的 querySelector 就可以达到目的了。

document.querySelector('[data-id="12345"')

注意-如果不需要，您可以一起跳过 id 部分。