Html Div 奇数和偶数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34944698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div odd and even
提问by user2125467
I have a problem that i believe to have a simple fix I just don't know the fix myself.
我有一个问题，我相信有一个简单的解决方法，我只是自己不知道解决方法。
Say i have some divs i.e.
说我有一些 div，即
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
etc.
等等。
If these boxes need to be alternate colours. I need to create some css which basically does the following:
如果这些盒子需要交替的颜色。我需要创建一些 css，它基本上执行以下操作：
.box-(odd-number) {
color:#000;
}
.box-(even-number) {
color:#fff;
}
Obviously I know the above is not the correct syntax. Could some one point me in the right direction.
显然我知道以上不是正确的语法。有人能指出我正确的方向吗？
Thanks
谢谢
回答by Rounin
You can use the nth-of-typepseudo-class, combined with the keywords oddand even:
您可以使用nth-of-type伪类，结合关键字odd和even：
.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;
}<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>回答by Nenad Vracar
You can do this using nth-child()with Even and odd rules.
你可以使用nth-child()with来做到这一点Even and odd rules。
.box:nth-child(odd) {
background: blue;
}
.box:nth-child(even) {
background: green;
}<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>Or you can can do this where :nth-child(2n)represents the evenand :nth-child(2n+1)represents the odd
或者你可以这样做，其中:nth-child(2n)代表偶数和:nth-child(2n+1)代表奇数
.box:nth-child(2n) {
background: red;
}
.box:nth-child(2n+1) {
background: yellow;
}<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>回答by Vangel Tzo
You're looking for nth-child(odd)and nth-child(even), If you don't want to apply .boxclassname.
您正在寻找nth-child(odd)and nth-child(even)，如果您不想应用.box类名。
[class^="box-"]:nth-child(odd) {
color:#000;
}
[class^="box-"]:nth-child(even) {
color:#fff;
}
An example: https://jsfiddle.net/8tkcuuwm/
回答by DasSaffe
See this jsfiddle:
看到这个jsfiddle：
HTML
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
CSS
.box:nth-child(odd) {
background-color: #336699;
}
.box:nth-child(even) {
background-color: #222;
}
Short explaination:
简短说明：
We added another class to the boxes, called box. This is, so we can refer to every element of this type. (My hint: use ID's for the box-1, box-2 stuff, since they appear to be unique).
Using the pseudo-classnth-childin combination with oddor even, will affect every (as you may assume) odd- or even element.
我们向这些框中添加了另一个类，称为box. 这是，所以我们可以引用这种类型的每个元素。（我的提示：将 ID 用于 box-1、box-2 的东西，因为它们看起来是独一无二的）。将第pseudo-classn 个子元素与奇数或偶数结合使用，将影响每个（如您所假设的）奇数或偶数元素。
回答by Fuzzzzel
To get this working you need a container of which you can adress the odd and even children like this. You set the class to the container and Format it's children accordingly.
为了让这个工作，你需要一个容器，你可以用它来处理这样的奇数和偶数孩子。您将类设置为容器并相应地格式化它的子项。
By this you only have to set the class once and can exchange it if needed, without having to modify each child separately:
通过这种方式，您只需要设置一次类，并且可以在需要时交换它，而不必分别修改每个子类：
<style type="text/css">
.container div:nth-child(odd) {
color:#F00;
}
.container div:nth-child(even) {
color:#00F;
}
</style>
<div class="container">
<div class="box-1">Lorem ipsum dolor sit amet.</div>
<div class="box-2">Lorem ipsum dolor sit amet.</div>
<div class="box-3">Lorem ipsum dolor sit amet.</div>
<div class="box-4">Lorem ipsum dolor sit amet.</div>
</div>
回答by Ali Zia
Use nth-childin order to achieve this.
使用nth-child以实现此目的。
HTML
HTML
<div class="box"></div>
<div class="box"><div>
<div class="box"></div>
<div class="box"></div>
CSS
CSS
.box:nth-child(odd) {
background-color: #000;
}
.box:nth-child(even) {
background-color: #FFF;
}
回答by Fabrizio Calderan
if colours should alternate depending only on the order of the div elements, (no matter the class name) then you could use div:nth-child(2n)and div:nth-child(2n + 1)
如果颜色应仅根据 div 元素的顺序交替（无论类名如何），那么您可以使用div:nth-child(2n)和div:nth-child(2n + 1)
On the contrary if it depends only on the last digit of your class name (no matter if your divs are in the right order) then you could write
相反，如果它仅取决于您的班级名称的最后一位数字（无论您的 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"] { ... }
