将相同样式应用于具有相同单词的多个ID

Question

我想知道是否有办法将相同样式应用于以相同作业开始的ID。

例如，我有＃youtube_gallery_item_1，＃youtube_gallery_item_2，....并且数字不断增加，因此每次添加新项目时都无法添加新ID。仅供参考，我正在使用Wordpress和YouTube SiimpleGallery插件。

我很感谢您的帮助！

Answer 1

CSS3中的“开头”选择器。

div[id^=youtube_gallery_item] { 

} 

请注意，这不适用于IE8及以下版本。

什么是一个更好的主意将是分配所有的#youtube_gallery_items一个类，然后指定该类的样式。我相信你使用的插件是这样做的。看看源代码，如果你发现它们都具有相同的类，使用方法：

.name-of-the-class { 

} 

Answer 2

您可以使用attribute selector：

[id^="youtube_gallery_item"] { 
    color: skyblue; 
} 

http://jsfiddle.net/p9Ya8/

Answer 3

我建议增加一个类

.youtube_gallery_item { 
    background: ; 
    width: ; 
    ... 
} 

它与所有浏览器兼容，是最简单的方式来解决。

<div id="youtube_gallery_item_1" class="youtube_gallery_item"></div> 
<div id="youtube_gallery_item_2" class="youtube_gallery_item"></div> 
<div id="youtube_gallery_item_3" class="youtube_gallery_item"></div>