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编写样式更容易： d

Answer 2

A＆＃39;班级＆＃39;可以在多个元素上使用，以将相同的CSS规则应用于每个元素。

＆＃39; ID＆＃39;是一个唯一的标识符，只能在一个元素上使用。

在您的情况下，您希望为每个元素添加一个类，并在该类上设置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个子指定。 / p>

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;
}

如果您需要为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）

我一次又一次地重复同样的事情，我可以在我的代码中使用循环吗？ HTML＆amp; CSS

4 个答案: