css - div を anther と同じスタイルで別の名前にする方法を教えてください。

Question

私は基本的に、同じスタイル (高さ、幅、不透明度など) の div が必要な状況に陥っていますが、それらすべてに異なる名前 (test1、test2、test3 など) を付ける必要があります。ある div のスタイルを別の 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 を区切ります。