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

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

这是一个带有适当标记框的演示,这样您就可以看到每个选择器的工作原理.

请注意,如果您有任何可能出现在内部容器之后的框,则您需要能够计算内部容器具有的子数,然后才能确定如何从该点开始计数.仅使用CSS是不可能的,因为选择器无法从内部元素提升到外部元素.有一些使用JavaScript的解决方法,但我怀疑这超出了手头问题的范围.