【问题标题】：Alternate colour between div using css使用css在div之间交替颜色
【发布时间】：2016-08-04 01:25:38
【问题描述】：

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

请帮忙！

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>

【问题讨论】：

.EditFormClass:nth-child(2n) { 不适合你？
我也试过这个。可悲的是，.EditFormClass:nth-child(2n) 什么都没有。我相信它适用于 col-xs-6 div
你能给我们一个小提琴/sn-p以便我们检查吗？
已添加。这是 php 脚本当前生成的内容。我希望整个 aaa x class 列显示为蓝色。

标签： php jquery twitter-bootstrap css

【解决方案1】：

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

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

检查这里： https://jsfiddle.net/yhvbLgun/

解释

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

【讨论】：

【解决方案2】：

你能用这个吗

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

【讨论】：

没用。添加了 JSFIDDLE。这是 php 脚本当前生成的内容。我希望整个 aaa 1 class、aaa 1 class 到 aaa 77 class 的列都是蓝色的。