如何使一个 div 具有与另一个相同的样式但具有不同的名称？答案

【问题标题】：How to I make a div have the same style's as anther but with a different name?如何使一个 div 具有与另一个相同的样式但具有不同的名称？
【发布时间】：2012-06-17 18:30:10
【问题描述】：

我基本上陷入了这样一种情况，即我需要一堆具有相同样式（高度、宽度、不透明度等）的 div，但我需要它们都具有不同的名称（test1、test2、test3 等）有什么方法可以轻松地将一个 div 的样式设置为另一个？

【问题讨论】：

标签： css html styles

【解决方案1】：

使用class：

<style>
div.mystyle {
    width: 10px;
}
</style>
<div class="mystyle" id="test1"/>
<div class="mystyle" id="test2"/>
<div class="mystyle" id="test3"/>
<div class="mystyle" id="test4"/>

【讨论】：

【解决方案2】：

像这样给他们一个类和一个 id：

<div id="test1" class="divstyle">
</div>
<div id="test2" class="divstyle">
</div>
<div id="test3" class="divstyle">
</div>     

<style>
  .divstyle{
    color:red;
  }
</style>

【讨论】：

【解决方案3】：

你也可以这样做：

#test1, #test2, #test3, #test4 { font-size:13px; }

所有这些 ID 都将共享该样式，只需使用逗号分隔 ID。

【讨论】：

【解决方案4】：

使用这种级联 css的常见实践。

HTML 标记：

<div class="common diff01"></div>
<div class="common diff02"></div>
<div class="common diff03"></div>
<div class="common diff04"></div>

CSS：

/* sizes and colors are demo only */
.common {
    height: 10px;
    width: 10px;
    opacity: 1;
}

.diff01 { background-color: #FFF; }
.diff02 { background-color: #AAA; }
.diff03 { background-color: #333; }
.diff04 { background-color: #000; }

【讨论】：