选择偶数/奇数类元素答案

【问题标题】：select even/odd class element选择偶数/奇数类元素
【发布时间】：2014-01-17 02:13:51
【问题描述】：

我想要一个选择器来选择以 elementWrapper 作为父元素的元素。如果父元素为偶数，则子元素向右浮动，如果为奇数，则向左浮动。

结果应该是这样的：

    <body>
        <style>
            .elementWrapper
            {
                width:100%;
                height:100px;
            }

            header, nav, div div, footer
            {
                width:50%;
                height:100px;
                background:#000;
            }
        </style>
        <div class="elementWrapper">
            <header style="float:left;"></header>
        </div>
        <div class="elementWrapper">
            <nav style="float:right;"></nav>
        </div>
        <div class="elementWrapper">
            <div style="float:left;"></div>
        </div>
        <div class="elementWrapper">
            <footer style="float:right;"></footer>
        </div>
    </body>

这可以用 css 选择器还是我应该在这里使用 js？ JSFiddle

【问题讨论】：

标签： html css

【解决方案1】：

使用nth-child(odd) || nth-child(even) 这个。
working demo

我认为这个 css 应该对你有用：

 .elementWrapper:nth-child(odd) {
       float:left;
    }
    .elementWrapper:nth-child(even) {
        float:right;
    }

【讨论】：

我们已经接近了，但这会使我的包装器向左或向右浮动，因为我给我的包装器一个 100% 的宽度，以这种方式浮动包装器在这里不会有帮助。它是以 elementWrapper 作为父元素的元素，应该向左或向右浮动。

【解决方案2】：

试试这样的，FIDDLE

.elementWrapper {
    width:100%;
    height:100px;
}
.elementWrapper:nth-child(even) * {
    float:left;
}
.elementWrapper:nth-child(odd) *{
   float:right;
}

如果你有子元素，那么你应该是具体的

    .elementWrapper:nth-child(odd) > header,
    .elementWrapper:nth-child(odd) > nav,
    .elementWrapper:nth-child(odd) > footer,
    .elementWrapper:nth-child(odd) > div{
       float:right;
    }

【讨论】：

我已经尝试过您的代码，虽然子元素以正确的方式浮动，但浮动元素的所有子元素也都以这种方式浮动。它应该只浮动 elementWrapper 类下方的元素。
是的，这对我有用。我希望有一种更通用的方法来做到这一点，但它确实有效，谢谢 rajesh。