有沒有一種方法可以根據ID名稱中的特定單詞設置ID的樣式？

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

如果你可以添加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 */ 
} 

已授權，正在運行如果您的頁面包含很多內容，則會很慢（因爲涉及到JavaScript），所以如果您可以縮小該選擇器的範圍，這可能是一個更可行的解決方案。

更重要的是，我沒有注意到僅在CSS中匹配部分ID名稱的方法。

Answer 2

使用CSS3前綴substring matching attribute selector：

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

這是supported by all current browsers。要獲得舊版IE的支持，請使用Selectivizr polyfill。還有一個後綴選擇器（[id$="..."]）和一般子串（[id*="..."]）。