0

有没有办法根据 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 的访问非常有限——我可以在布局中添加脚本/样式，但仅此而已。

4

2 回答 2

4

使用 CSS3 前缀子字符串匹配属性选择器：

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

当前所有浏览器都支持它。要获得旧版本 IE 的支持，请使用Selectivizr polyfill。还有一个用于后缀 ( [id$="..."]) 和通用子字符串 ( [id*="..."]) 的选择器。

于 2012-07-06T18:13:12.520 回答
0

如果您可以添加 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 名称。

于 2012-07-06T17:58:38.130 回答