CSS nth-of-type选择器，带有嵌套元素 [英] CSS nth-of-type selector with nested elements

问题描述

我有多个特定类.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;
}

这是一个演示，并带有适当标记的框，您可以了解每个选择器的工作方式.

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.

这篇关于CSS nth-of-type选择器，带有嵌套元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！