将 CSS 应用于具有相同模式的元素

Question

我在HTML中有这些元素:

<div id="element0div0">
div 0
</div>
<div id="element1div1">
div 1
</div>
<div id="element2div2">
div 2
</div>

我能否使用类似正则表达式的方式来将CSS应用于类似element{n}div{n}这样的元素？

- user1903750

---

ids和classes是由CMS创建的。 - user1903750

Answer 1

没有通用的正则表达式可以区分数字和字母，但你可以使用以下方法来解决：

div[id^=element][id*=div] {
    /* css */
}

这种方法有缺陷，因为它将匹配以下（及更多）id字符串：

• elementdiv
• elementSomeOtherStringdiv
• elementdivSomeOtherString

考虑到您问题的性质，我建议您为所有需要应用相同样式的元素使用通用类名会更明智。

参考资料:

• CSS 属性选择器.

- David Thomas

---

SomeOther 只能是整数吗？ - user1903750

不可以；据我所知，CSS目前没有区分字母、数字或任何其他字符的方法。 - David Thomas

Answer 2

是的，你可以使用 JavaScript 进行翻译。

使用 jQuery：

$('div').filter(function() {
   return this.id.match(/element[\d]+div[\d]+/)
}).css({color:'red'}); 

使用原生JavaScript：

for (var divs=document.getElementsByTagName('div'), i=0; i<divs.length; i++) {
    if (divs[i].id.match(/element[\d]+div[\d]+/)) divs[i].style.color="red";
}

这里假设您需要按照应用于其id的正则表达式样式对元素进行样式设置。不过，通常情况下，您可以找到更简单的解决方案，例如在构建HTML时添加类。请注意保留HTML标签。

- Denys Séguret

---

你意识到没有 [tag:jquery] 或者 [tag:javascript] 标签吗？所以虽然你的答案可以工作，但是考虑到使用了 jQuery，你可能需要向提问者解释一下。因为根据问题描述，提问者可能不知道如何实现你的答案。 - David Thomas

@DavidThomas 没错，我不知道为什么会认为这是一个 jQuery 的问题。我已经更新了。 - Denys Séguret

完全没有问题（说真的：我开始在梦里看到那些标签了！）=） - David Thomas