如何选择每个框进行样式设置有三个类，盒子子类只说框，但有 10 个

Question

如何设置十个框的样式，当我尝试与父项一起设置所有十个框的样式时...我尝试重命名盒子子级的每个类，以便我可以设置它们的样式，但它不起作用如何选择使用单独的背景颜色设置每个盒子的样式....此外，当我尝试在导航上获取图像时，我什么也没得到，当我从检查工具复制图像链接时，徽标不存在，我只得到了图像。

<section class="middle-content">
<h2>Why Did It Have To Be Boxes...</h2>
<div class="boxes">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="box">Box 8</div>
<div class="box">Box 9</div>
<div class="box">Box 10</div>
</div>
</section>

Answer 1

您可以使用nth-child选择器。它可以接受要定位的元素的单个index(从索引1开始(，也可以指定一个规则(3n表示每个third元素(

.box:nth-child(1) {
background: yellow;
}
.box:nth-child(2) {
background: red;
}
.box:nth-child(3n) {
background: green;
}

<section class="middle-content">
<h2>Why Did It Have To Be Boxes...</h2>
<div class="boxes">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="box">Box 8</div>
<div class="box">Box 9</div>
<div class="box">Box 10</div>
</div>
</section>

Answer 2

使用 ：nth - child

.boxes .box:nth-child(1) {  
color: lime; 
}

小提琴> https://jsfiddle.net/hansfelix50/58qefsxb/