Question

我有一些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>

我希望奇数名称/引用与偶数名称略有不同。我试过这个，然而，它既适用于它们，也不适用于它们。这是我可以单独用CSS做的事情吗？我需要Javascript才能实现这个目标吗？

.quote:nth-child(odd) {
    border-right:solid 5px #CCCCCC;
    border-left:none;
}

.name:nth-child(odd) {
    text-align:right;
}

Answer 1

您可以在:nth-child(4n-2)上放置.row选择器而不是嵌套div来执行此操作。然后在第2行之后选择每第4行，这恰好是你想要奇怪的那一行。在这种情况下，代码将是：

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

View demo

这将选择第2行，第6行，第10行等内的.name元素，以及表格中第3行，第7行，第11行等内的.quote元素。

偶数和Odd伪这个标记

1 个答案: