带有嵌套元素的类型选择器的第n个CSS

我有一些特定类的div.box，我想为它们设置一个交替的背景色。但是，一些div被放置在另一个div.内部容器中：

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

因此，使用第n个类型（偶数）或第n个子类型（偶数）每秒钟更改一次颜色。仅使用CSS是否可以实现交替背景

注意：我不知道有多少盒子是.container的直接子容器，有多少盒子在.inner容器内

---

您仍然可以仅在此处应用CSS的交替背景。这里有一个

有两种方法可以做到这一点：

方法1:

直接针对

的每个级别

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

上述方法仅针对父级

.container

的第一级子级。这不会影响

内部

容器中的
.s

为了分别针对
内部
.internal container
中的

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

方法2:

为嵌套的
添加第二个类，并以这种方式将它们作为目标：

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


潜水艇
潜水艇
潜水艇
嵌套的div

我基本上需要一个选择器来计算这些框，就好像它们都是同一父.container的直接子对象一样（就好像.inner容器不存在一样）

假设只有一个内部容器-并且除了
.box
和
.internal 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有一些变通方法，但我怀疑这超出了当前问题的范围。
不清楚您想要实现什么。是否仅交替内部框的背景？你想让它考虑到内部容器外的盒子数量吗？或者，你想让它计算盒子的数量，就像它们共享同一个父容器一样？你能告诉我们更多吗？我基本上需要一个选择器，它可以计算盒子的数量，就像它们都是同一个父容器.container的直接子容器一样（就像.inner容器不存在一样）@Holger:好的-很简单（假设正确）。我会写一个答案。可靠的答案，如果你有嵌套元素，这是正确的方法。当交替表行（）嵌套在不同的元素中时，它对我突出显示它们特别有用。