将 CSS 样式应用于新的 div ID答案

【问题标题】：Apply CSS Style to New Div IDs将 CSS 样式应用于新的 div ID
【发布时间】：2014-05-01 07:59:30
【问题描述】：

在我的 wordpress 网站中，“chimp-button-*”的 div id 的数字不断自动变化。与其每次更改时都需要添加新的 div id，有没有办法使用通配符来捕获所有以 chimp-button 开头的 div id？

这是我所拥有的：

#chimp-button-7, #chimp-button-6, #chimp-button-5, etc... {
position:relative !important;
}

我想做这样的事情......

#chimp-button-* {
position:relative !important;
}

对不起，我是 CSS 菜鸟。

【问题讨论】：

【解决方案1】：

这被调用到属性选择器

习惯了

[id^="chimp-button-"],
[id*="chimp-button-"]{
   // here your  style 
}

【讨论】：

【解决方案2】：

您可以使用attribute selector 选择这些元素，因此[id^="chimp-button-"] 会起作用，但它也是管理样式的一种糟糕方法。

不要尝试根据 ID 模式选择元素，而是给所有这些元素一个公共类属性，例如 class="chimp-button"，然后您可以选择所有带有 .chimp-button 的元素。

【讨论】：

【解决方案3】：

你需要的是属性选择器。使用您的 html 结构的示例如下：div[class*='chimp-button-'] {color:red }

在div的位置可以添加任意元素，在class的位置可以添加指定元素的任意属性。

有关 CSS 属性选择器的更多信息，请参阅 here 和 here。

【讨论】：