有没有办法用一种方式多种方式？

Question

例如,如果我想要很多正方形,但希望它们是不同的颜色,那么它们可能是同一个类吗？如,

  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>

或者是他们拥有自己的颜色的唯一可能的方法是给他们每个人自己的课程？如

  <div class="squares-1"></div>
  <div class="squares-2"></div>
  <div class="squares-3"></div>

等等...

我想知道因为我一直在做第二种方式,但似乎还有其他方法可以做到这一点,额外的CSS几乎似乎很多.

Answer 1

您可以使用多个类:

<div class="squares square-1"></div>
<div class="squares square-2"></div>
<div class="squares square-3"></div>

然后在CSS中:

.squares { width: 100px; height: 100px; };
.square-1 { background: red; }
.square-2 { background: yellow; }
.square-3 { background: blue; }

在css中,您还可以匹配多个类:

<div class="square odd">1</div>
<div class="square even">2</div>
<div class="square odd">3</div>
<div class="square even">4</div>

CSS:

.square.odd { background: red; }
.square.even { background: blue; }