我使用css

Question

我的网站上有四个网格块。我需要在第一次和最后一次涂上红色。中间的其他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>

Answer 2

你也可以在这里使用nth-child并定位你想要的块。

.wrap {
  width: 100%;
}

.wrap div {
  width: 25px;
  height: 25px;
  border: 1px solid #ccc;
  display: inline-block;
  margin: 15px;
}

.wrap div:nth-child(1),
.wrap div:nth-child(4) {
  background: red;
}

<div class='wrap'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>