html - 使用第 n 个选择器选择特定的 div？

Question

我有 12 个 div 绑定(bind)到同一个类但 ID 不同，我想对特定的 div 应用边距，这可以用第 n 个选择器实现吗？

我在下面有一个粗略的例子(我在我的实际元素中使用了一个 sprite 表，所以所有的 ra ID 都有一个背景位置设置以及宽度和高度)。

.tra-ra-cont {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.tra-ra-box {
  line-height: 210px;
  text-align: center;
  margin: 3px;
}

.tra-ra-box a {
  height: 210px;
  width: 270px;
  display: block;
  font-size: 18px;
  text-decoration: none;
  color: black;
}

#ra1,
#ra2,
#ra3,
#ra4,
#ra5,
#ra6,
#ra7,
#ra8,
#ra9,
#ra10,
#ra11,
#ra12 {
  background-repeat: no-repeat;
  background-color: lightblue;
  width: 270px;
  height: 210px;
}

<div class="tra-ra-cont">
  <div class="tra-ra-box" id="ra1"><a href="">Range 1</a></div>
  <div class="tra-ra-box" id="ra2"><a href="">Range 2</a></div>
  <div class="tra-ra-box" id="ra3"><a href="">Range 3</a></div>
  <div class="tra-ra-box" id="ra4"><a href="">Range 4</a></div>
  <div class="tra-ra-box" id="ra5"><a href="">Range 5</a></div>
  <div class="tra-ra-box" id="ra6"><a href="">Range 6</a></div>
  <div class="tra-ra-box" id="ra7"><a href="">Range 7</a></div>
  <div class="tra-ra-box" id="ra8"><a href="">Range 8</a></div>
  <div class="tra-ra-box" id="ra9"><a href="">Range 9</a></div>
  <div class="tra-ra-box" id="ra10"><a href="">Range 10</a></div>
  <div class="tra-ra-box" id="ra11"><a href="">Range 11</a></div>
  <div class="tra-ra-box" id="ra12"><a href="">Range 12</a></div>
</div>

我需要对这些 ID 应用边距:ra2、ra3、ra6、ra7、ra10 和 ra11

Answer 1

您可以使用第 n 个 child 4n+2(ra2、ra6 和 ra10)和 4n+3(ra3、ra7 和 ra11):

.tra-ra-cont {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.tra-ra-box {
  line-height: 210px;
  text-align: center;
  margin: 3px;
}

.tra-ra-box a {
  height: 210px;
  width: 270px;
  display: block;
  font-size: 18px;
  text-decoration: none;
  color: black;
}

.tra-ra-box {
  background-repeat: no-repeat;
  background-color: lightblue;
  width: 270px;
  height: 210px;
}

.tra-ra-cont > div:nth-child(4n + 2),
.tra-ra-cont > div:nth-child(4n + 3) {
  background-color:red;
}

<div class="tra-ra-cont">
  <div class="tra-ra-box" id="ra1"><a href="">Range 1</a></div>
  <div class="tra-ra-box" id="ra2"><a href="">Range 2</a></div>
  <div class="tra-ra-box" id="ra3"><a href="">Range 3</a></div>
  <div class="tra-ra-box" id="ra4"><a href="">Range 4</a></div>
  <div class="tra-ra-box" id="ra5"><a href="">Range 5</a></div>
  <div class="tra-ra-box" id="ra6"><a href="">Range 6</a></div>
  <div class="tra-ra-box" id="ra7"><a href="">Range 7</a></div>
  <div class="tra-ra-box" id="ra8"><a href="">Range 8</a></div>
  <div class="tra-ra-box" id="ra9"><a href="">Range 9</a></div>
  <div class="tra-ra-box" id="ra10"><a href="">Range 10</a></div>
  <div class="tra-ra-box" id="ra11"><a href="">Range 11</a></div>
  <div class="tra-ra-box" id="ra12"><a href="">Range 12</a></div>
</div>