选择所有div只有中间ID的差异

Question

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

   <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

您正在寻找attribute selectors：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

来自[attr$=value]上的MDN文档的

解释：

  

表示属性名称为attr的元素，其值的后缀为＆＃34; value＆＃34;。

换句话说，使用此功能，您将匹配id中结尾的所有region。这会将id排除在region.read之外，如您所愿。

如果您有其他id以region结尾，但不以myid开头，则可以使您的选择器更加明确，仅匹配{{ {1}} 开始 id，结束 myid：

region