时间戳

首页 > 解决方案 > 如何选择每个框进行样式设置，共有三个类，框子类只说框，但其中有 10 个

html - 如何选择每个框进行样式设置，共有三个类，框子类只说框，但其中有 10 个

问题描述

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

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

标签： htmlcss

解决方案

您可以使用nth-child选择器。它可以接受一个index你想要定位的元素（从 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>

推荐阅读