Div奇数和偶数

我有一个问题，我相信有一个简单的解决方法，我只是不知道自己的修复。Div奇数和偶数

说我有一些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; 
}

很显然，我知道上面是不正确的语法。有人能指出我正确的方向吗？

感谢

来源

2016-01-22 user2125467

可以使用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>

来源

2016-01-22 10:44:06 Rounin

可以使用nth-child()与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>

或者你也可以可以做到这一点，其中: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>

来源

2016-01-22 10:44:22

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

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

一个例子：https://jsfiddle.net/8tkcuuwm/

来源

2016-01-22 10:46:08

如果颜色应该只取决于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"] { ... }

来源

2016-01-22 10:47:30 fcalderan

看到这个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作为box-1，box-2的东西，因为它们看起来是唯一的）。使用pseudo-class第n个孩子结合奇或甚至，将影响到每一个（因为你可以假设）奇数甚至元素。

来源

2016-01-22 10:48:52 DasSaffe

为了得到这个工作，你需要一个容器，你可以为这样的奇怪的，甚至是孩子寻找答案。您将该类设置为容器并相应地对其进行格式化。

通过这一点，你只需要设置类一次，如果需要的话可以交换它，而不必单独修改每个孩子：

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

来源

2016-01-22 10:52:05 Fuzzzzel

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

来源

2016-01-22 10:52:50

Div奇数和偶数

回答

相关问题