Question

我有一个包含多个div的页面，我想根据奇数和偶数规则更改background-color属性，前两个div不包含在计数中，所以我希望它从第四节开始，应该是很奇怪，因为它是第一个，但它没有工作它总是保持平衡，这是我的代码：

＆＃13;

.box:nth-child(odd) {
  background-color: yellow;
}

.box:nth-child(even) {
  background-color: red;
}

＆＃13;

<div>Hello World</div>
<div>Hello World</div>
<div>Hello World</div>
<div class="box">Hello World</div>
<div class="box">Hello World</div>
<div class="box">Hello World</div>
<div class="box">Hello World</div>

＆＃13;

Answer 1

第四是偶数。如果您希望以不同方式计算，请将其作为不同容器中的第一个（或奇数）子项。

Answer 2

如果您使用的是jquery，可以这样做：

$(document).ready(function() {
  $(".box:odd").css('background-color','yellow');
  $(".box:even").css('background-color','red');
});

来源（带段落的示例）：https://codepen.io/cibily/pen/hCDjF

Answer 3

它不起作用，因为它们是同一父母的兄弟姐妹或孩子，所以你试图只选择那些有类的人并不重要，它会计算兄弟标签。所以它不是第一个（奇数），而是第四个（偶数）。

只需将其更改为：

.box:nth-child(odd) {
  background-color: red;
}

.box:nth-child(even) {
  background-color: yellow;
}

然后你会按照你想要的顺序得到颜色。

奇怪/甚至造型div

3 个答案: