Div odd and even | 易学教程

问题

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 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:

.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

回答1:

You can use the nth-of-type pseudo-class, combined with the keywords odd and 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>

回答2:

You can do this using 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 even and :nth-child(2n+1) represents the odd

.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>

回答3:

You're looking for nth-child(odd) and nth-child(even), If you don't want to apply .box classname.

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

An example: https://jsfiddle.net/8tkcuuwm/

回答4:

See this 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;
}

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-class nth-child in combination with odd or even, will affect every (as you may assume) odd- or even element.

回答5:

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>

回答6:

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)

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

[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"] { ... }

回答7:

Use nth-child in order to achieve this.

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;
}

来源：https://stackoverflow.com/questions/34944698/div-odd-and-even

标签

html

css