nth-child，使用类名称更改其他div的样式

Question

I have got some elements on my page, they should all be styled the same except for every other one, where I just want to change some styling.

Here is the CSS which I was hoping would select the div inside the stack of different elements:

.stagger_reviews[class=inner]:nth-child(2n+2) {
    background-color:#003;
}

Here is the HTML:

<div class="stagger_reviews">
<!-- Later use PHP to load reviews, CSS should switch the images from left to right -->
    <article class="container box style1">
        <a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
        <div class="inner">
            <header>
                <h2>Martyn Ball</h2>
            </header>
            <p>
                I found this service on a Google Search, didn't expect it to be so great!
            </p>
        </div>
    </article>
    <article class="container box style1">
        <a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
        <div class="inner">
            <header>
                <h2>Martyn Ball</h2>
            </header>
            <p>
                I found this service on a Google Search, didn't expect it to be so great!
            </p>
        </div>
    </article>
</div>

As you can see I just want to adjust the one div inside each article which has the class name inner . And maybe some other elements as well but once I have this working I can do that.

The style isn't being applied to the second inner div, I have made about 4 copies of the article and none are being changed.

Answer 1

这是解决方案，我将第n个孩子放在错误的位置。

.stagger_reviews > article:nth-child(2n+2) div[class=inner]