我有一个问题,我相信有一个简单的修复我只是不知道自己修复.
说我有一些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; }
显然我知道上面的语法不正确.有人可以指出我正确的方向.
谢谢
解决方法
您可以使用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>
