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

Answer 2

您可以使用：nth-child选择器

.squares {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: red;
}

.squares:nth-child(2) {
    background: green;
}

.squares:nth-child(3) {
    background: blue;
}

.squares:nth-child(4) {
    background: pink;
}

.squares:nth-child(5) {
    background: black;
}

.squares:nth-child(6) {
    background: purple;
}

示例：http://jsfiddle.net/3ztmyvu7/

虽然就个人而言，我会避免这样做，并为你的元素提供描述性的类，比如：

.squares.blue {
    background: blue
}

.squares.purple {
    background: purple
}

Answer 3

您可以随时使用square类并添加style="color:whatever"，因为最嵌套的答案会覆盖其他人。

Answer 4

上述答案是正确的，但您也可以使用id=color：

<div class="squares" id=square1></div>
<div class="squares" id=square2></div>
<div class="squares" id=square3></div>
<div class="squares" id=square4></div>
<div class="squares" id=square5></div>
<div class="squares" id=square6></div>

然后给class=squares每个方格所需的所有属性：

.squares {
    # Attributes for ALL squares
}

除了一般squares属性外，每个不同的方块也可以拥有自己的属性：

#square1 {
    color: blue;
} 
#square2 {
    color: red;
} 
#square3 {
    color: green;
} 
#square4 {
    color: orange;
} 
#square5 {
    color:purple;
}

Answer 5

<div class="squares" style="background-color: black"></div>
<div class="squares" style="position: absolute"></div>

简而言之，是的。

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

5 个答案: