같은 코드를 반복해서 반복해서 사용할 수 있나요? 여기 코드에서 루프를 사용할 수 있습니까? 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/스팬과 거기 DIV 언더 이하 스팬에 대한 스타일을 작성하는 것보다 쉬울 수 있습니다 : D

Answer 2

'class'는 여러 요소에 사용되어 각 요소에 동일한 CSS 규칙을 적용 할 수 있습니다.

'ID'는 하나의 요소에서만 사용해야하는 고유 식별자입니다.

귀하의 경우 각 요소에 클래스를 추가하고 각 요소에 CSS 규칙을 적용하여 해당 요소가 각 요소에 적용되도록하려는 경우입니다.

.myclass { 
    background: #000; 
} 

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

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

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

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

위의 예에서 .myclass 용 CSS의 규칙 집합은 네 가지 요소 모두에 적용됩니다.

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를 기존의 오버라이드 (override) 할 필요가 https://jsfiddle.net/q83ojcbq/

---

또는 @ Bri.H와 유사합니다. 이미 대답했습니다. 다른 요소에 대해 동일한 규칙 (CSS 클래스)을 사용할 수 있습니다.