div标签中的不同背景颜色

Question

我想知道是否有更好的方法在CSS中设置4种不同的背景颜色。我必须进行以下设置：

我可以制作一个更干净，更好的代码，或者这是唯一的方法吗？在我的观点之后，代码看起来真的很难看。

<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>



.bg1 {
    background-color: blue;
}
.bg2 {
    background-color: red;
}
.bg3 {
    background-color: green;
}
bg4 {
    background-color: purple;
}

Answer 1

Personnaly，我会这样做：

<div class="square square-blue"></div>
<div class="square square-red"></div>
<div class="square square-green"></div>
<div class="square square-purple"></div>

并在CSS中：

.square{
    border: 1px solid black; // and all params
}
.square-blue {
    background-color: blue;
}
.square-green {
    background-color: green;
}
.square-purple {
    background-color: purple;
}
.square-red {
    background-color: red;
}

更具可读性（BEM的少量用法 - http://getbem.com/introduction/）。

Answer 2

你可以为每个div添加style ='background-color：＃123456'，如果你真的不得不因为模板引擎的一些限制（我无法想象这样的情况），但你有什么在这种情况下很好。

编辑：我的意思是，如果你想拥有，说一个彩虹效应。在Perl / TemplateToolkit中，我可以看到类似的内容：

[% for ($code = 0; $code < $whatever_max_hex_is'; $code++) { %]
<div style='background-color: [%$code%]'></div>
[%END%]

这样的事情。完全未经测试，但我相信你会得到漂移。

Answer 3

你可以在这里使用nth-child / nth-of-type

检查以下代码段。

.container div:nth-child(1) {
  background: blue;
}
div:nth-of-type(2) {
  background: red;
}
div:nth-of-type(3) {
  background: green;
}
div:nth-of-type(4) {
  background: purple;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.container div {
  width: 100vw;
  height: 50px;
}

<div class="container">
  <div class="bg1"></div>
  <div class="bg2"></div>
  <div class="bg3"></div>
  <div class="bg4"></div>
</div>

希望有所帮助