Html 此标记的奇偶伪标记

我有一些HTML什么将在这个格式

<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h1 class="birch">Testimonials</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-11 col-md-11 col-sm-12 col-xs-12 name">
            <p>Odd Name</p>
        </div>
    </div>
    <div class="row">
            <div class="col-lg-offset-1 col-lg-11 col-md-offset-1 col-md-11 col-sm-12 col-xs-12 quote">
                <p>Odd Quote</p>
            </div>
    </div>

    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 name">
            <p>Even Name</p>
        </div>
    </div>
    <div class="row">
            <div class="col-lg-11 col-md-11 col-sm-12 col-xs-12 quote">
                <p>Even Quote</p>
            </div>
    </div>
</div>

---

可以通过在

行

上放置

：n第n个子项（4n-2）

选择器，而不是其嵌套的

div

来完成此操作。然后在第二行之后每隔第四行选择一次，这恰好是您想要的奇数。在这种情况下，代码将是：

.row:nth-child(4n-2) .name {
    text-align:right;
}
.row:nth-child(4n-1) .quote {
    border-right:solid 5px #CCCCCC;
    border-left:none;
}

---

这将选择表的第2、第6、第10等行中的

.name

元素，以及第3、第7、第11等行中的

.quote

元素。

n子元素

指的是与其直接同级元素相比的元素。无论是

.quote

还是

.name

都没有兄弟姐妹，所以他们总是

n=1

（奇数）你能在所有奇数中添加一个类，在偶数中添加另一个类吗？你可以在服务器端添加偶数/奇数类我想我必须在服务器端这样做，如果是的话，我宁愿使用CSSpossible@oGeez当然，使用CSS是可能的。看看我的答案。选择奇数行，然后选择这些子行，而不是选择子行本身。简单的豌豆。谢谢你：），效果很好。然而，我将其改为-4和-3，因为这些样式在偶数行上看起来更好，而不是奇数行：P。

.row:nth-child(4n-2) .name {
    text-align:right;
}
.row:nth-child(4n-1) .quote {
    border-right:solid 5px #CCCCCC;
    border-left:none;
}