Question

HTML code：

<section>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</section>

CSS代码：

.box {
    width: 100px;
    height: 100px;
}
div:nth-child(1) {
    background:red; 
}
div:nth-child(2) {
    background:yellow;  
}
div:nth-child(3) {
    background:green;   
}

有没有更好的方法在每个盒子中定义不同的颜色？我不想为div使用id。

Answer 1

您考虑过多个班级吗？

HTML代码：

<section>
  <div class="box box-red"></div>
  <div class="box box-yellow"></div>
  <div class="box box-green"></div>
</section>

CSS代码：

.box {
    width: 100px;
    height: 100px;
}
.box-red {
    background: red;
}
.box-yellow {
    background: yellow;
}
.box-green {
    background: green;
}

希望这有帮助。

在没有id属性的情况下应用css属性的替代方法

1 个答案: