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

Question

我有12个div绑定到同一个类，但具有不同的ID，并且我想对特定的ID应用边距，使用第n个选择器可以吗？

下面我有一个粗糙的示例（我在实际项目中使用的是精灵表，因此所有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个子项for index in {100..200}; do curl -f "https://example.com/images/products/$index/$index.jpg" -o "/Users/user/Desktop/output/$index.jpg" done （ra2，ra6和ra10）和4n+2（ra3，ra7和ra11）：

4n+3

.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;
}