在一个 css 语句中设置常见的 div 组样式答案

【问题标题】：Style common group of divs in one css statement在一个 css 语句中设置常见的 div 组样式
【发布时间】：2010-03-20 17:52:53
【问题描述】：

我有几个用 Javascript 动态创建的 div。我想知道是否可以一次为它们设置样式。

#somediv {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

#somediv2 {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

...等等（这甚至可以是 50 个 div）

我想将其更改为：

 #somediv* {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

【问题讨论】：

标签： javascript css

【解决方案1】：

如果它们的样式完全相同，请使用一个类，look here for the difference：

.divClass {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

那么你的 div 是这样的：

<div id="somediv" class="divClass"></div>
<div id="somediv2" class="divClass"></div>

只需编辑您的脚本以包含类属性，这是迄今为止最简单的解决方案...这正是类的用途:)

【讨论】：

【解决方案2】：

为您动态创建的 div 提供一个类，然后为该类设置样式。或者，如果您将新的 div 插入容器中，您可以根据该容器进行选择：

<div id='stuff_goes_here'>
  <!-- ... dynamic divs will go here ... -->
</div>

然后：

#stuff_goes_here div {
  /* ... styles ... */
}

【讨论】：

我怎么没想到。天才:)

【解决方案3】：

这是创建类属性来处理的。给你所有的 div 一个相同的类，你可以这样说：

.divclass {
    背景颜色：#F2F5FC；
    边框样式：实心；
    边框底部：细虚线#33ccff；
}

但如果你真的需要按照你的要求去做，你可以使用一种新形式的选择器。以下内容将匹配所有以“somediv”开头的 ID，但这不适用于旧版浏览器：

[id^=somediv] {
    背景颜色：#F2F5FC；
    边框样式：实心；
    边框底部：细虚线#33ccff；
}

【讨论】：

【解决方案4】：

#somediv, #somediv2 {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

【讨论】：

是的，但是如果我有 50 个 div 怎么办？
然后按照其他人的建议，使用一个类，或者输入很多逗号。
@Vafello，那么您可以使用 - 取决于您的受众 - CSS 的 starts-with 选择器（请参阅我的回答），尽管通用类会更实用且易于使用。

【解决方案5】：

我个人建议使用class，因为这就是它们的用途；不过，你可以随心所欲：

div[id^=somediv]
{
/* css styles */
}

使用 CSS starts-with 选择器 (http://reference.sitepoint.com/css/css3attributeselectors)，尽管它依赖于您的用户/受众中的 CSS 3（我认为）实现。

【讨论】：