css - 如何使 div 具有与花药相同的样式但名称不同？

Question

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

Answer 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"/>

Answer 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>

Answer 3

使用这种级联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; }

Answer 4

你也可以这样做：

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

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