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

问题描述

我的代码是这样的:

<!-- 第 1 行 --><div class='item'></div><div class='item'></div><div class='item'></div><!- 第 2 行 --><div class='item'></div><div class='item'></div><div class='item'></div><!-- 第 3 行 --><div class='item'></div><div class='item'></div><div class='item'></div><!-- 等等-->

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

<!-- 第 1 行 --><div class='item'>{红色边框的项目}</div><div class='item'>{带有紫色边框的项目}</div><div class='item'>{带有黄色边框的项目}</div><!- 第 2 行 --><div class='item'>{红色边框的项目}</div><div class='item'>{带有紫色边框的项目}</div><div class='item'>{带有黄色边框的项目}</div><!-- 第 3 行 --><div class='item'>{红色边框的项目}</div><div class='item'>{带有紫色边框的项目}</div><div class='item'>{带有黄色边框的项目}</div><!-- 等等-->

我该怎么做?我正在考虑使用类似 :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) { 边框:1px 纯红色；}div.item:nth-child(3n+2) { 边框:1px 纯蓝色；}div.item:nth-child(3n) { 边框:1px 纯黄色；}

<!-- 第 1 行 --><div class='item'>{红色边框的项目}</div><div class='item'>{带有紫色边框的项目}</div><div class='item'>{带有黄色边框的项目}</div><!- 第 2 行 --><div class='item'>{红色边框的项目}</div><div class='item'>{带有紫色边框的项目}</div><div class='item'>{带有黄色边框的项目}</div><!-- 第 3 行 --><div class='item'>{红色边框的项目}</div><div class='item'>{带有紫色边框的项目}</div><div class='item'>{带有黄色边框的项目}</div><!-- 等等-->

I have my code like this:

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

I want to target these items using css only.I want the first item or each row to have a border red, the second item with border purple and the third item with border yellow for example.So it should be something like this:

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

How can I do this?I was thinking of using something like :nth-child(2n) but this doesn't work, it just works on every other item so I'm looking for another solution.

解决方案

You are thinking just right. nth-child should do the job. However, you need to calculate the pattern.

How does this work? Xn+Y works by using n placeholder as the elements starting from 0.

So, 3n+2 will target starting from 3 x 0 + 2 = 2, 3 x 1 + 2 = 5, and so on. This will target your purple divs. Similarly, 3n+1 will target 3x0+1 = 1, 3x1+1 = 4, and so on. Lastly, 3n+3 is equivalent to just 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>

这篇关于选择具有 3 个项目的行中的每第二个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！