html - 将 css 应用于具有相同模式的元素

Question

我在 html 中有这个元素：

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

我可以使用正则表达式之类的东西将 css 应用于元素 {n}div {n} 之类的元素吗？

Answer 1

没有正则表达式可以区分数字和字母，但您绝对可以使用以下方法解决：

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

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

• 元素div
• elementSomeOtherStringdiv
• elementdivSomeOtherString

我建议，考虑到您问题的性质，对您希望应用通用样式的所有元素简单地使用通用类名会更明智。

参考：

• CSS 属性选择器。

Answer 2

是的，你可以，但你必须使用 JavaScript。

使用 jQuery：

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

使用香草js：

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 时添加一个类。