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

由于每行有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 2

我该怎么做？我在考虑使用类似的东西：n-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。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

选择一行中包含3个项目的每个第二个元素

3 个答案: