Question

我有一个问题，我相信有一个简单的修复我只是不知道修复自己。

说我有一些div，即

<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>

等

如果这些盒子需要备用颜色。我需要创建一些基本上执行以下操作的css：

.box-(odd-number) {
    color:#000;
}
.box-(even-number) {
    color:#fff;
}

显然我知道上面的语法不正确。有人可以指出我正确的方向。

由于

Answer 1

您可以使用nth-of-type伪类，结合关键字odd和even：

＆＃13;

.box:nth-of-type(odd) {
background-color:#000;
}
    
.box:nth-of-type(even) {
background-color:#fff;
}

.box {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #f00;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用nth-child() Even and odd rules使用{{3}}执行此操作。

＆＃13;

.box:nth-child(odd) {
    background: blue;
}
.box:nth-child(even) {
    background: green;
}

＆＃13;

<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>

＆＃13;

或者你可以在:nth-child(2n)代表偶数而:nth-child(2n+1)代表奇数

的情况下执行此操作

＆＃13;

.box:nth-child(2n) {
    background: red;
}
.box:nth-child(2n+1) {
    background: yellow;
}

＆＃13;

<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>

＆＃13;

Answer 3

您正在寻找nth-child(odd)和nth-child(even)，如果您不想申请.box类名。

[class^="box-"]:nth-child(odd) {
    color:#000;
}
[class^="box-"]:nth-child(even) {
    color:#fff;
}

示例：https://jsfiddle.net/8tkcuuwm/

Answer 4

如果颜色应该交替，只取决于div元素的顺序（无论类名），那么你可以使用div:nth-child(2n)和div:nth-child(2n + 1)

相反，如果它只取决于你的班级名字的最后一位数字（无论你的div是否是正确的顺序）那么你可以写

[class^="box"][class$="2"],
[class^="box"][class$="4"],
[class^="box"][class$="6"],
[class^="box"][class$="8"],
[class^="box"][class$="0"] { ... }

[class^="box"][class$="1"],
[class^="box"][class$="3"],
[class^="box"][class$="5"],
[class^="box"][class$="7"],
[class^="box"][class$="9"] { ... }

Answer 5

请参阅此jsfiddle：

<强> HTML

<div class="box box-1">Hello World</div>
<div class="box box-2">Hello World</div>
<div class="box box-3">Hello World</div>
<div class="box box-4">Hello World</div>

<强> CSS

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

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

简短解释：

我们在方框中添加了另一个类，名为box。这是，所以我们可以参考这种类型的每个元素。（我的提示：使用ID＆＃39; s作为box-1，box-2的东西，因为它们似乎是唯一的）。将pseudo-class nth-child 与奇数或偶数结合使用，会影响每个（您可能认为）奇数或甚至元素。

Answer 6

为了使这个工作，你需要一个容器，你可以像这样对待奇数和偶数的孩子。您将类设置为容器并相应地格式化它的子项。

通过这个你只需要设置一次类，并且可以根据需要进行交换，而不必分别修改每个孩子：

create_video

Answer 7

使用nth-child来实现这一目标。

HTML

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

CSS

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

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

Div奇怪而且偶数

7 个答案: