html - 我可以在这里的代码中使用循环，而不是一次又一次地重复同样的事情吗？ 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/span 以及 under-div 和 under-span 编写样式更容易: