选择名称中具有未知 id 的 div [重复]答案

【问题标题】：Select div with unknown id in name [duplicate]选择名称中具有未知 id 的 div [重复]
【发布时间】：2020-04-23 22:51:23
【问题描述】：

我有一个名为 #mobile_div_111X222X333-99 的 div，111X222X333 是可以更改的问题 ID。我有很多问题，但我想选择包含 #mobile_div_{any_ID}-99 的每个 div 是否只使用 css 来做到这一点？

【问题讨论】：

问了同样的问题，查看下面的链接CSS selector

标签： css

【解决方案1】：

虽然 CSS 不支持正则表达式查询选择器，但根据您的情况，我们可以选择具有id 属性的div 以mobile_div_ 开头并以-99 结尾

div[id^="mobile_div_"][id$="-99"] {
    // your style
}

我们在这里使用了两个 CSS3 选择器：

^= 以

开头

$= 以

结尾

参考：

https://www.w3schools.com/cssref/sel_attr_begin.asp

https://www.w3schools.com/cssref/sel_attr_end.asp

【讨论】：

谢谢你像黄油一样工作?

【解决方案2】：

您可以将前缀属性选择器与[x^=y] 一起使用，即[id^=mobile_div_]。

如果这还不够具体，您可以在顶部堆叠一个后缀属性选择器，使用语法[x$=y]，即[id$=-99]，以获得[id^=mobile_div_][id$=-99] 的完整选择器。注意括号之间没有空格。

【讨论】：

【解决方案3】：

你可以这样使用-

HTML

<div id="abc-123">
  <h1>helo</h1>
</div>
<div id="123-xyz">
  <h1>helo</h1>
</div>
<div id="mobile_div_a-99">
  <h1>helo</h1>
</div>
<div id="mobile_div_b-11">
  <h1>helo</h1>
</div>
<div id="mobile_div_c-99">
  <h1>helo</h1>
</div>

(^) 用于“开始于”，($) 用于“结束于”。

[id^="abc"]{
  color:blue;
}

[id$="xyz"]{
  color:green;
}

[id^="mobile_div_"][id$='-99']{
background-color:red;  
}

如果 id='abc-xyz'，由于 CSS 是层叠样式表（即：从上到下的方法），文本颜色将为绿色。

【讨论】：