html - 我使用 css 进行迭代

Question

我的网站有四个网格 block 。我需要在第一个和最后一个上涂上红色。中间的其他 2 个应保留为白色。

如何在不使用 Javascipt 的情况下完成此操作？

Answer 1

您可以使用 CSS first-child 和 last-child 属性。尝试运行下面的代码段。

.containers {
  height: 50px;
  width: 50px;
  border: 1px solid;
  display: inline-block
}

.containers:first-child,
.containers:last-child {
  background: red;
}

<div class="blocks">
  <div class="containers"></div>
  <div class="containers"></div>
  <div class="containers"></div>
  <div class="containers"></div>
</div>