Question

有没有办法根据ID名称中的特定单词设置ID？

如果我有这样的话：

<div id="name-of-id.1234">Something</div>
<div id="name-of-id.5678">Something</div>
<div id="name-of-id.4321">Something</div>

通常我会这样做：

div#name-of-id\.1234,
div#name-of-id\.5678,
div#name-of-id\.4321 {
    color: #F0F;
}

但我会做很多这样的事情：

div[# contains the word "name-of-id"] {
    color: #F0F;
}

有没有办法定位ID这样的特定单词？

我对html的访问非常有限 - 我可以在布局中添加脚本/样式，但这就是它。

Answer 1

使用CSS3前缀substring matching attribute selector：

div[id^="name-of-id"] {
    color: #F0F;
}

是supported by all current browsers。要获得旧版IE的支持，请使用Selectivizr polyfill。还有一个后缀选择器（[id$="..."]）和一般子串（[id*="..."]）。

Answer 2

如果您可以添加javascript（并使用jQuery），可以添加如下内容：

$('div').each(function(){
    if(this.id.match('name-of-id')) {
        $(this).addClass('someClass');
    }
});

如果没有jQuery，你可以这样做：

var elems = document.getElementsByTagName('div');
for(var i=0; i<elems.length; i++) {
    if(this.id.match('name-of-id')) {
        this.className = this.className + 'someClass';
    }
}

然后用类来设置它们的样式：

.someClass {
    /* your CSS styles */
}

当然，如果你的网页包含很多，那么运行$('div')会很慢（就javascript而言），所以如果你可以缩小选择范围，这可能是一个更可行的解决方案。

更重要的是，我没有一种方法可以仅在CSS中匹配部分ID名称。

有没有办法根据ID名称中的特定单词设置ID？

2 个答案: