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

2022-01-10 00:00:00 css-selectors css

我有许多特定类 .box 的 div，我想为其设置交替的背景颜色.但是，有些 div 被放置在另一个 div .inner-container 中:

I have a number of divs of a particular class .box for which I want to set an alternating background color. However, some of the divs are placed inside another 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(even) 或 nth-child(even) 每秒更改 .box 的颜色在这里不起作用.是否可以仅使用 CSS 来实现交替背景?

So using nth-of-type(even) or nth-child(even) to change the color for every second .box does not work here. Is it possible to achieve the alternating background anyhow with using CSS only?

注意:我不知道有多少盒子是 .container 的直接子级，以及 .inner-container 里面有多少.

Note: I dont know how many boxes will be direct children of .container and how many will be inside the .inner-container.

jsfiddle

推荐答案

我基本上需要一个选择器来计算盒子，就好像它们都是同一个父级 .container 的直接子级一样(就好像 .inner-container 不存在一样).

I basically need a selector that counts the boxes as if they were all direct children of the same parent .container (as if the .inner-container would not exist).

假设只有一个内部容器——除了 .box 和 .inner-container 之外没有其他元素——你需要使用 :内部容器上的 nth-child() 确定其相对于其 .box 兄弟(而不是其 .box 子级)的位置，从而确定是否以一种或另一种方式交替其内容的背景:

Assuming there will only be exactly one inner container — and no other elements besides .box and .inner-container — you'll need to use :nth-child() on the inner container to determine its position relative to its .box siblings (not its .box children), and thus determine whether to alternate the background on its contents one way or the other:

.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，其中的方框已适当标记，以便您了解每个选择器的工作原理.

Here's a demo with the boxes appropriately labeled so you can see how each selector works.

请注意，如果您有任何可能出现在内容器之后的框，您需要能够计算内容器的子容器数量，然后才能确定如何开始计数从那时起.仅使用 CSS 是不可能的，因为 选择器不能从内部元素上升到外部元素.有使用 JavaScript 的解决方法，但我怀疑这超出了当前问题的范围.

Note that if you have any boxes that could appear after the inner container, you'll need to be able to count the number of children the inner container has before you can determine how to start counting from that point. This will not be possible with just CSS because selectors cannot ascend from inner elements to outer elements. There are workarounds using JavaScript, but I suspect this is outside the scope of the question at hand.

相关文章