选择具有 3 个项目的行中的每个第二个元素

Question

我的代码是这样的：

<div class='container'>
    <!-- row 1 -->
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <!- row 2 -->
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <!-- row 3 -->
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <!-- etc -->
</div>

我只想使用 css 来定位这些项目。 例如，我希望第一个项目或每一行的边框为红色，第二个项目的边框为紫色，第三个项目的边框为黄色。 所以应该是这样的：

<div class='container'>
    <!-- row 1 -->
    <div class='item'>{item with red border}</div>
    <div class='item'>{item with purple border}</div>
    <div class='item'>{item with yellow border}</div>
    <!- row 2 -->
    <div class='item'>{item with red border}</div>
    <div class='item'>{item with purple border}</div>
    <div class='item'>{item with yellow border}</div>
    <!-- row 3 -->
    <div class='item'>{item with red border}</div>
    <div class='item'>{item with purple border}</div>
    <div class='item'>{item with yellow border}</div>
    <!-- etc -->
</div>

我该怎么做？ 我正在考虑使用 :nth-child(2n) 之类的东西，但这不起作用，它只适用于其他所有项目，所以我正在寻找另一种解决方案。

Answer 1

我该怎么做？我正在考虑使用类似的东西 :nth-child(2n) 但这不起作用

你的想法是对的。 nth-child 应该可以完成这项工作。但是，您需要计算模式。

这是如何工作的？ Xn+Y 使用 n 占位符作为从 0 开始的元素。

所以，3n+2 的目标将从 3 x 0 + 2 = 2、3 x 1 + 2 = 5 等开始。这将针对您的紫色 div。 同样，3n+1 将针对 3x0+1 = 1、3x1+1 = 4 等。 最后，3n+3 等同于 3n。

div.item { margin: 4px; }
div.item:nth-child(3n+1) { border: 1px solid red; }
div.item:nth-child(3n+2) { border: 1px solid blue; }
div.item:nth-child(3n) { border: 1px solid yellow; }

<div class='container'>
    <!-- row 1 -->
    <div class='item'>{item with red border}</div>
    <div class='item'>{item with purple border}</div>
    <div class='item'>{item with yellow border}</div>
    <!- row 2 -->
    <div class='item'>{item with red border}</div>
    <div class='item'>{item with purple border}</div>
    <div class='item'>{item with yellow border}</div>
    <!-- row 3 -->
    <div class='item'>{item with red border}</div>
    <div class='item'>{item with purple border}</div>
    <div class='item'>{item with yellow border}</div>
    <!-- etc -->
</div>

Answer 2

由于您每行有 3 个项目，因此您需要做 3n + 您需要的数字：

.item {
  border: 1px solid black;
}

/* every first item of 3 item row */
.container div:nth-child(3n+1) {
  border-color: red;
}

/* every second item of 3 item row */
.container div:nth-child(3n+2) {
  border-color: purple;
}

/* every third item of 3 item row */
.container div:nth-child(3n+3) {
  border-color: yellow;
}

<div class='container'>
  <!-- row 1 -->
  <div class='item'>{item with red border}</div>
  <div class='item'>{item with purple border}</div>
  <div class='item'>{item with yellow border}</div>
  <!- row 2 -->
  <div class='item'>{item with red border}</div>
  <div class='item'>{item with purple border}</div>
  <div class='item'>{item with yellow border}</div>
  <!-- row 3 -->
  <div class='item'>{item with red border}</div>
  <div class='item'>{item with purple border}</div>
  <div class='item'>{item with yellow border}</div>
  <!-- etc -->
</div>

Answer 3

.item:nth-child(3n+1){
       border:2px solid red;
    }
    
    .item:nth-child(3n+2){
       border:2px solid purple;
    }
    
    .item:nth-child(3n+3){
       border:2px solid yellow;
       margin-bottom: 50px;
    }
    

<div class='container'>
    <!-- row 1 -->
    <div class='item'>a</div>
    <div class='item'>b</div>
    <div class='item'>c</div>
    <!- row 2 -->
    <div class='item'>a</div>
    <div class='item'>b</div>
    <div class='item'>c</div>
    <!-- row 3 -->
    <div class='item'>a</div>
    <div class='item'>b</div>
    <div class='item'>c</div>
    <!-- etc -->
</div>