我可以在这里在我的代码中使用循环，而不是一次又一次地重复同样的事情吗？ HTML & CSS答案

【问题标题】：Insted of repeating the same thing again and again can I use a loop in my code here? HTML & CSS我可以在这里在我的代码中使用循环，而不是一次又一次地重复同样的事情吗？ HTML & CSS
【发布时间】：2017-02-14 03:14:45
【问题描述】：

我总共有 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;
}

【问题讨论】：

对所有跨度使用相同的类？？？？或使用其他选择器，例如 ul.boxers li > span ???
你不能只为.boxer1、.boxer2、.boxer3 使用一个公共类吗？类的想法是它们是可重用的。
绝对定位是一种非常糟糕的网页布局方法。它非常不灵活，并且有更好、响应速度更快的选项。查看LearnLayout.com

标签： html css image loops repeat

【解决方案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 编写样式更容易： D

【讨论】：

@DaniP 当然是课堂，不是风格 :) Benny 没有说任何关于 ID 的内容，所以这只是示例，我目前正在大量使用它。

【解决方案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 设置的规则将应用于所有四个元素。

【讨论】：

【解决方案3】：

首先 - 据我所知，这些类没有区别，因此您可以为所有类使用一个通用类并设置一次样式。

也就是说，如果您使用一些脚本循环创建图像，可能它们也在其他容器的某种形式中，在这种情况下，如果您需要区分，您可以在 CSS 中使用第 n 个子标识。

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

【讨论】：

【解决方案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;
}

如果你需要为 span.boxer1 设置不同的 css，你可以这样写：

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-classes）

【讨论】：