div使用css的替代颜色

Question

我希望交替的EditFormClass div具有蓝色但这不起作用。我甚至试过.EditFormClass:nth-child(3n)但它没有用。我想这个问题是因为col-xs-6 div介于两者之间。我如何使这个工作？

请帮忙！

JSFIDDLE：https://jsfiddle.net/4kpz876e/

CSS：

.EditFormClass:nth-child(odd) {
    color: blue;
}

PHP代码

    <div class="row">
        <?php foreach ($this->fields as $field) { ?>
            <div class="col-xs-5 EditFormClass">
                <?php echo $field[0]; ?>
            </div>
            <div class="col-xs-6">
                <?php echo $field[1]; ?>
            </div>
        <?php } ?>
    </div>

Answer 1

你能用这个

吗？

.EditFormClass:nth-child(odd) {
    background-color: blue !important;
}

Answer 2

您可以使用.col-xs-3:nth-child(4n-1)：

.col-xs-3:nth-child(4n-1) {
    color: blue;
}

点击此处： https://jsfiddle.net/yhvbLgun/

解释

在每一行中你有4个子div，并且你希望它们中的第3个具有蓝色，所以将蓝色应用于4th-1子div（使用:nth-child(4n-1)）。