Question

我想做以下事情，我想知道最好的方法。

我有一个div，它是容器宽度的20％（5个块）。我想为每个块提供不同的背景颜色，但只使用一个CSS类。最好的方法是什么？

在过去，我曾经创建了5个不同的类，其中只有bg颜色不同（因为其他一切都相同 - 宽度和高度相同），但我认为有更好的方法。

是否可以在CSS中创建一个处理每个容器的不同bg颜色的类？

Answer 1

我不太确定它是否会起作用，但是可以试试这个 - 对所有div都有一个相同的课程（因为你已经拥有 - 比如说，课程是＆＃39; myDiv＆＃39;）。然后在css -

.myDiv:nth-child(1){
  background-color: red;
}
.myDiv:nth-child(2){
  background-color: blue;
}
.myDiv:nth-child(3){
  background-color: yellow;
}

依旧......

希望这会有所帮助：）

Answer 2

使用：n-child或相邻的兄弟选择器

喜欢这样

.parent { width: 100%; }
.parent > div { width: 20%; float: left; }
.parent > div:nth-child(1) { background-color: black; }
.parent > div:nth-child(2) { background-color: blue; }
.parent > div:nth-child(3) { background-color: purple; }
.parent > div:nth-child(4) { background-color: orange; }
.parent > div:nth-child(5) { background-color: yellow; }

Example here

Answer 3

参见http://www.w3.org/TR/css3-selectors/ 在此链接中，请参阅li，div和...的css3选择器

tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

/* Alternate division enter code herecolours in CSS */
.mydiv:nth-child(1) { color: navy; }
.mydiv:nth-child(2) { color: green; }
.mydiv:nth-child(3) { color: maroon; }
.mydiv:nth-child(4) { color: purple; }

CSS语法（非常基础）

3 个答案: