css - nth-child 选择器，用于重复定位第 1 和第 4，以及第 2 和第 3 个元素

Question

我正在尝试用第 nth-child 做一个 css 选择器来创建类似的东西，但我认为这是不可能的。

主要问题是重复这个。

  a:nth-child(3n+1) {
    grid-column: 1/4;
    border: 1px solid red;
  }

  a:nth-child(3n+2) {
    grid-column: 4/13;
    border: 1px solid blue;
  }
<div class="box-container">
 <a href="#">1</a>
 <a hred="#">2</a>
<a href="#">3</a>
 <a hred="#">4</a>
 <a href="#">1</a>
 <a hred="#">2</a>
<a href="#">3</a>
 <a hred="#">4</a>
</div>

更新:那这个呢？？也许最好使用网格区域模板？还是第n个 child ？或者根本不可能？下图

Answer 1

你可以使用:nth-child作为

.item:nth-child(4n) {
  grid-column: 10/13;
  border: 1px solid red;
}

.item:nth-child(4n+1) {
  grid-column: 1/4;
  border: 1px solid red;
}

.item:nth-child(4n+2) {
  grid-column: 4/13;
  border: 1px solid blue;
}

.item:nth-child(4n+3) {
  grid-column: 1/10;
  border: 1px solid blue;
}

.item {
  height: 100px;
}

.grid {
  display: grid;
  grid-gap: 10px;
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>