Question

我想要一个选择器，它选择将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

Answer 1

使用nth-child(odd) || nth-child(even)为此 working demo

这个 css 应该为你做的我认为：

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

Answer 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;
    }

选择偶数/奇数类元素

2 个答案: