英文:
Select div with unknown id in name
问题
我有一个名为 #mobile_div_111X222X333-99 的 div，111X222X333 是问题 ID，可以变化。我有很多问题，但我想选择包含 #mobile_div_{任何ID}-99 的每个 div，有没有仅使用 CSS 来做到这一点的方法？
英文:
I have div named #mobile_div_111X222X333-99, 111X222X333 is question id which can change. I have lots of questions but I want to select every div that contains #mobile_div_{any_ID}-99 is it anyway to do that with css only?
答案1
得分: 3
尽管CSS不支持正则表达式查询选择器，但在您的情况下，我们可以选择具有以mobile_div_开头并以-99结尾的div元素。
div[id^="mobile_div_"][id$="-99"] {
// 您的样式
}
在这里，我们使用了两个CSS3选择器：
^= 表示以某文本开头
$= 表示以某文本结尾
参考链接：
https://www.w3schools.com/cssref/sel_attr_begin.asp
https://www.w3schools.com/cssref/sel_attr_end.asp
英文:
Althought CSS does not support regular expression query selector, with your case, we can select div that has id attribute starts with mobile_div_ and ends with -99
div[id^="mobile_div_"][id$="-99"] {
// your style
}
We use two CSS3 selectors here:
^= starts with
$= ends with
Refs:
答案2
得分: 1
你可以使用前缀属性选择器 [x^=y]，例如 [id^=mobile_div_]。
如果这还不够具体，你可以在上面叠加后缀属性选择器，使用语法 [x$=y]，例如 [id$=-99]，得到完整的选择器 [id^=mobile_div_][id$=-99]。注意方括号之间没有空格。
英文:
You can use prefix attribute selectors with [x^=y], i.e. [id^=mobile_div_].
If that's not specific enough, you can stack a suffix attribute selector on top, using the syntax [x$=y], i.e. [id$=-99], for a complete selector of [id^=mobile_div_][id$=-99]. Note the lack of a space between the brackets.
答案3
得分: 0
以下是您要翻译的内容：
你可以这样使用它 -
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 是层叠样式表（即：自上而下的方法），文本颜色将是绿色。
英文:
You can use is like this -
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>
The (^) is used for "starting with" and ($) is used for "ending with".
[id^="abc"]{
color:blue;
}
[id$="xyz"]{
color:green;
}
[id^="mobile_div_"][id$='-99']{
background-color:red;
}
if id='abc-xyz', since CSS is Cascading Style Sheets (ie: top to bottom approach ) , the text color will be green.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论