选择所有 div，其中差异仅在 ID 的中间数字上

Question

我有所有这些具有相同ID名称的div，除了它们中间都有一个不同的数字。

<div id="myid1region">text</div>
<div id="myid20region">text</div>
<div id="myid333region">text</div>
<div id="myid4region">text</div>

如何通过 css 选择所有div？

div#myid[*]region {  }

我不想在结果组中得到这个<div id="myid[numbers]region.read">text</div>

Answer 1

您正在寻找属性选择器：

div[id^="myid"][id$="region"] {
color: red;
}

<div id="myid1region">text</div>
<div id="myid2region">text</div>
<div id="myid3region.read">text</div>
<div id="myid4region">text</div>

MDN 文档对[attr$=value]的解释：

表示属性名称为 attr 的元素，其值后缀为"value"。

换句话说，有了这个，您将匹配所有以region结尾的id.这不包括以region.read结尾的ids，如您所愿。

如果你有其他以region结尾但不以myid开头的id，你可以让你的选择器更明确，只匹配那些以myid开头并以region结尾的id：

div[id^="myid"][id$="region"] { ... }