css - 从嵌套 div 中选择偶数

Question

我正在尝试选择具有类名的所有其他 div。问题是它们都在不同的父 div 中。我已经尝试了很多关于 sibling 选择的事情，但还没有找到解决方案。这就是我要找的:

给类名article的偶数div添加30px的边距

<div class="wrapper">
    <div class="section">
        <div class="article"><!--No Margin here-->
        </div>
    </div>
    <div class="section">
        <div class="article"><!--Add Margin here-->
        </div>
    </div>
    <div class="section">
        <div class="article"><!--No Margin here-->
        </div>
    </div>
    <div class="section">
        <div class="article"><!--Add Margin here-->
        </div>
    </div>
</div>

我尝试过类似的方法但没有成功:

.section > .article:nth-child(even){
margin-right: 30px;
}

Answer 1

您需要选择偶数/奇数 .section 元素，而不是选择偶数/奇数 .article 元素。

.section:nth-child(even) > .article
{
    /* Your css here */
}

fiddle :http://jsfiddle.net/jakelauer/4PMbS/