本文介绍了Div奇数和偶数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个问题,我相信有一个简单的修复程序,只是我自己不知道该修复程序.
I have a problem that i believe to have a simple fix I just don't know the fix myself.
说我有一些div,例如
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>
等
如果这些框需要使用其他颜色.我需要创建一些基本执行以下操作的css:
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.
谢谢
推荐答案
您可以将 nth-of-type
伪类与关键字 odd
和偶
:
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>
这篇关于Div奇数和偶数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!