快速第n个孩子的问题 [英] Quick nth-child issue

问题描述

我正在努力解决一个快速的:nth-child问题.我的目标是在构成列表的4个项目的分组中定位第3个和第4个项目.

I've a quick :nth-child issue that I'm struggling to solve. I'm aiming to target every 3rd and 4th item in a grouping of 4 items that form a list.

例如:

<div class="normal">Item 1</div>
<div class="normal">Item 2</div>
<div class="different">Item 3</div>
<div class="different">Item 4</div>
<div class="normal">Item 5</div>
<div class="normal">Item 6</div>
<div class="different">Item 7</div>
<div class="different">Item 8</div>

在此示例中，我想定位<div class="different">的所有实例-我使用了很多nth-child生成器来给出答案，但是没有什么让我满足我的需求.

In this example I'd like to target all instances of <div class="different"> - i've used a lot of nth-child generators to come up with an answer but nothing gets me to what I need.

任何帮助将不胜感激！

推荐答案

使用div:nth-child(4n-1), div:nth-child(4n).逻辑很简单-您要选择四组中的项目，因此4n将是公分母.由于您要选择组中倒数第二个和最后一个项目，因此分别使用4n-1和4n即可.

Use div:nth-child(4n-1), div:nth-child(4n). The logic is simple — you want to select items in groups of four, so 4n would be the common denominator. Since you want to select the penultimate and the last items in the group, 4n-1 and 4n respectively would do the job.

以下是说明我的观点的简单图表:

As follow is a simple diagram illustrating my point:

#1
#2
#3  <- 4th item - 1
#4  <- 4th item
#5
#6
#7  <- 4th item -1
#8  <- 4th item

div:nth-child(4n-1), div:nth-child(4n) {
  background-color: #eee;
}

<div class="normal">Item 1</div>
<div class="normal">Item 2</div>
<div class="different">Item 3</div>
<div class="different">Item 4</div>
<div class="normal">Item 5</div>
<div class="normal">Item 6</div>
<div class="different">Item 7</div>
<div class="different">Item 8</div>

这篇关于快速第n个孩子的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！