同じことを何度も繰り返すことで、ここで自分のコードにループを使うことができますか？ HTMLとCSS

Question

私は25枚の画像をまとめています。

自分自身で簡単にするために、何とかループを使用できますか？私は以下のように、同じコードを何度も何度も繰り返したくない。

span.boxer1 { 
    background: rgba(0,0,0,0.5); 
    color: white; 
    cursor: pointer; 
    display: table; 
    height: 300px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 275px; 
    opacity: 0; 
} 

span.boxer1 span { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

ul.boxers li:hover span.boxer1 { 
    opacity: 1; 
} 
span.boxer2 { 
    background: rgba(0,0,0,0.5); 
    color: white; 
    cursor: pointer; 
    display: table; 
    height: 300px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 275px; 
    opacity: 0; 
} 

span.boxer2 span { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

ul.boxers li:hover span.boxer2 { 
    opacity: 1; 
} 

span.boxer3 { 
    background: rgba(0,0,0,0.5); 
    color: white; 
    cursor: pointer; 
    display: table; 
    height: 300px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 275px; 
    opacity: 0; 
} 

span.boxer3 span { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

ul.boxers li:hover span.boxer3 { 
    opacity: 1; 
} 

span.boxer4 { 
    background: rgba(0,0,0,0.5); 
    color: white; 
    cursor: pointer; 
    display: table; 
    height: 300px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 275px; 
    opacity: 0; 
} 

span.boxer4 span { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

ul.boxers li:hover span.boxer4 { 
    opacity: 1; 
} 

Answer 1

あなたは知っていますあなたは1つの要素で複数のスタイルを使用できますか？

<div id="myid1needforsomethingelse" class="liketable300 topalign myfont14"> 
<span class="mypadding2 mymargin3 myheadersbig"> content </span> 
</div> 
<div id="myid2needforsomethingelse" class="liketable300 topalign myfont12"> 
<span class="mypadding2 mymargin3 mycontentmedium"> content </span> 
</div> 

だからクラスで繰り返してばかり繰り返しに使用し、あなたのCSSを分割し、私はがそれぞれ任意のDIV /スパンとそこにdivのアンダーアンダースパンのスタイルを書くよりも簡単かもしれない：D

Answer 2

'class'は、複数の要素で同じCSS規則を各要素に適用するために使用できます。

「ID」は、1つの要素でのみ使用する固有の識別子です。

あなたの場合、それぞれの要素にクラスを追加し、それらの要素が各要素に適用されるようにそのクラスにCSSルールを設定したいとします。

.myclass { 
    background: #000; 
} 

<div class="myclass"></div> 

<div class="myclass"></div> 

<div class="myclass"></div> 

<div class="myclass"></div> 

上記の例では、CSSの.myclassに設定されたルールは、4つの要素すべてに適用されます。

Answer 3

まず、これらのクラスに違いはないことが分かるので、すべてのクラスに共通のクラスを使用して、スタイリングを一度設定することができます。

画像を作成するためにスクリプトを使用している場合は、おそらく他のコンテナの形式になっている可能性があります。その場合は、区別する必要がある場合はCSSのn番目の子指定を使用できます。

div.boxercontainer:nth-child(1) { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

Answer 4

あなたが好きコンマでいくつかの選択のための共通のCSSルールを記述することができます：あなたはspan.boxer1のために、例えば、異なるCSSを設定する必要がある場合には

span.boxer1, span.boxer2 { 
    background: rgba(0,0,0,0.5); 
    color: white; 
    cursor: pointer; 
    display: table; 
    height: 300px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 275px; 
    opacity: 0; 
} 

span.boxer1 span, span.boxer2 span { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

ul.boxers li:hover span.boxer1, ul.boxers li:hover span.boxer2 { 
    opacity: 1; 
} 

、あなたはこれを書くことができます。

span.boxer1 { width : 300px;} // in this case the latest css-rule will be applied to element, so width:300 will override width:250 which are upper in css file 

これは一般的なCSSの既存のオーバーライドする必要がありますhttps://jsfiddle.net/q83ojcbq/

---

または@ Bri.Hのように。すでに回答しています。異なる要素に同じルール（CSSクラス）を使用できます。