如何访问多行中的每个第四个元素？

Question

我有类似的东西

<div class="content">
    <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>

CSS

.content { width:100%;}
.item {width:20%, float: left}

• 所以他们连续5个，我使用nth-child（4n + 4）来设置每个第4个元素的样式，但是不起作用！

因为在第一行它是第4个元素然后是第9个元素第14个，依此类推！有什么我能解决的吗？

Answer 1

新答案

我看到你更新了你的问题 “连续5个”意味着我们必须对每个5n元素进行样式化 然后，当n = 0时，您只需要添加+4以开始样式化第4个元素。

以下是根据您的代码修改我的答案：

.content {
  width: 100%;
}

.item {
  width: 20%;
  float: left;
}

.item:nth-child(5n+4) {
  color: red;
}

<div class="content">
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
</div>

旧答案

在这种情况下无需+4 这是一个工作片段：

.item:nth-child(4n) {
  color: red;
}

<div class="content">
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
  <div class="item">x</div>
</div>

无论如何，如果您使用4n+4，我不知道您做错了什么，这也有效！

Answer 2

每行 5个元素，您需要访问每行中的第4个，所以您应该这样做：

.item {
  width: 20%;
  float: left;
  height: 10px;
  background: blue;
  border: 1px solid;
  box-sizing: border-box;
}

.item:nth-child(5n + 4) {
  background: red;
}

<div class="content">
  <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 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 class="item"></div>
</div>

Answer 3

试试这个，这将为每个第4个div设置样式。

div:nth-child(4n)
{
  color: green;
}

Answer 4

.item:nth-child(4n) {
  background-color: red;
}

这里正在研究JS Bin： http://jsbin.com/xafubixoja/edit?html,css,output

Answer 5

<强> .item：第n个孩子（4N）

.item:nth-child(4n) {
  color: red;
}

<div class="content">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

Answer 6

如前所述，不需要+4

但是，无论如何我完成了片段，我会发布它。

＆＃13;

＆＃13;

var items = document.querySelectorAll('div.item');

var i = 0;

items.forEach((item) => {
  i++;
  item.innerHTML = i;
});

＆＃13;

div.item {
  width: 100%;
  margin: 1px 0;
  border: 1px solid #000000;
}

.content div:nth-child(4n) {
  background-color: red;
}

＆＃13;

<div class="content">
  <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 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>

＆＃13;

＆＃13;

＆＃13;