Question

我有一些特定类.box的div，我想为它设置交替的背景颜色。但是，有些div放在另一个div .inner-container：

中

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="inner-container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

所以使用nth-of-type（偶数）或nth-child（偶数）来改变每秒的颜色.box在这里不起作用。是否有可能只使用CSS来实现交替背景？

注意：我不知道有多少个盒子是.container的直接子节点，有多少盒子会在.inner-container中。

jsfiddle

Answer 1

我基本上需要一个选择器来计算方框，好像它们都是同一个父.container的直接子节点（就好像.inner-container不存在一样）。

假设只有一个内部容器 - 除了.box和.inner-container之外没有其他元素 - 你需要在内部容器上使用:nth-child()来确定它的相对位置到它的.box兄弟姐妹（而不是它的.box个孩子），从而确定是否以某种方式替换其内容的背景：

.container > .box:nth-child(even) {
    background-color: #bb3333;
}

.container > .inner-container:nth-child(odd) > .box:nth-child(even),
.container > .inner-container:nth-child(even) > .box:nth-child(odd) {
    background-color: #bb3333;
}

这是一个demo，其中的框已正确标记，以便您可以查看每个选择器的工作方式。

请注意，如果您有在内部容器后出现的任何框，您需要能够计算内部容器所具有的子项数，然后才能确定如何开始计数从那时起。因为selectors cannot ascend from inner elements to outer elements只能用CSS来实现这一点。有一些使用JavaScript的解决方法，但我怀疑这不在手头的问题范围内。

Answer 2

您仍然可以在此处使用带有CSS的交替背景。这是一个 Fiddle of it in action 。

有两种方法可以做到：

方法1：

直接定位<div>的每个级别。

.container > .box:nth-child(even) {
    /* stuff */
}

上述方法仅针对父.container的第一级孩子。这不会影响<div>内的.inner-container。

要单独定位<div>内的.inner-container，我们会再次使用相同的技巧，但从另一个父容器开始：

.inner-container > .box:nth-child(even) {
    /* stuff */
}

方法2：

为嵌套的<div>添加第二个类并以这种方式定位它们：

<div class="container">
    <div class="box">a div</div>
    <div class="box">a div</div>
    <div class="box">a div</div>
    <div class="inner-container">
        <div class="another-box">a nested div</div>
    </div>
</div>

具有嵌套元素的CSS nth-of-type选择器

2 个答案: