Принудительно повторять одно и то же снова и снова, могу ли я использовать цикл в моем коде здесь? 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

Вы знаете, что вы можете использовать несколько стилей в одном элементе?

<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/диапазона и под-ДИВ и под пролетом там: D

Answer 2

«Класс» может использоваться для нескольких элементов для применения одних и тех же правил CSS к каждому элементу.

«ID» - уникальный идентификатор, который должен использоваться только для одного элемента.

В вашем случае вы хотите добавить класс к каждому из своих элементов и установить свои правила CSS для этого класса, чтобы они были применены к каждому элементу, например.

.myclass { 
    background: #000; 
} 

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

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

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

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

В приведенном выше примере правило, установленное в CSS для .myclass, будет применяться ко всем четырем элементам.

Answer 3

Прежде всего - насколько я могу судить, в этих классах нет разницы, поэтому вы можете просто использовать общий класс для всех из них и установить стиль один раз.

При этом, если вы используете какой-либо скрипт для создания изображений, предположительно, они также находятся в каком-то другом контейнере, и в этом случае вы можете использовать n-е дочернее обозначение в CSS, если вам нужно различать.

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

Answer 4

Вы можете написать общие правила 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; 
} 

В случае, если необходимо установить различные CSS, например, для span.boxer1, вы можете написать следующее:

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-классы) для разных элементов