html - 如何仅使用类 "box special"而不仅仅是 "box"开始对第 n 个子选择器进行计数？

Question

我想让一些盒子根据它们是组中的奇数还是偶数盒子而具有不同的属性，但仅适用于多个类的选择器:但它包括原始 box 类的对象，尽管它不在第 n 个 child 的 CSS 选择器中:

http://jsfiddle.net/wLx67r83/

<div class="box">1</div>
<div class="box special">1</div>
<div class="box special">1</div>

.box
{
    width: 100px;
    height: 50px;
    background-color: #e3e3e3;
}

.box.special:nth-child(odd)
{
    background-color: red;
}

.box.special:nth-child(even)
{
    background-color: blue;
}

第三个框应该是蓝色的，但它是红色的!第二个应该是红色的，但它是蓝色的!

Answer 1

您必须更改 css 中的偶数/奇数。

http://jsfiddle.net/wLx67r83/6/

<div class="box">1</div>
<div class="box special">1</div>
<div class="box special">1</div>

.box
{
    width: 100px;
    height: 50px;
    background-color: #e3e3e3;
}

.special:nth-child(even)
{
    background-color: red;
}

.box.special:nth-child(odd)
{
    background-color: blue;
}

编辑:或者您可以选择公式选项 http://jsfiddle.net/wLx67r83/28/

.special:nth-child(2n+0)
{
    background-color: red !important;
}
.special:nth-child(2n+3)
{
    background-color: blue !important;
}