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

【问题标题】：CSS nth-of-type selector with nested elements带有嵌套元素的 CSS nth-of-type 选择器
【发布时间】：2014-06-02 03:25:51
【问题描述】：

我有许多特定类 .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(even) 或 nth-child(even) 每秒更改 .box 的颜色在这里不起作用。是否可以仅使用 CSS 来实现交替背景？

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

jsfiddle

【问题讨论】：

不清楚您要达到的目标。你想只改变内盒的背景吗？是否要考虑到内容器外面的箱子数量？
或者，您是否希望它像共享同一个父对象一样计算这些框？
你能告诉我们更多吗？
我基本上需要一个选择器来计算这些框，就好像它们都是同一个父级 .container 的直接子级一样（好像 .inner-container 不存在一样）。
@Holger：好的——很简单（假设正确）。我会写一个答案。

标签： css css-selectors

【解决方案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，带有适当标记的框，以便您了解每个选择器的工作原理。

请注意，如果您有任何可能出现在内容器之后的框，您需要能够计算内容器的子容器数量，然后才能确定如何开始计数从那时起。仅使用 CSS 是不可能的，因为 selectors cannot ascend from inner elements to outer elements。有使用 JavaScript 的解决方法，但我怀疑这超出了当前问题的范围。

【讨论】：

可靠的答案，如果您有嵌套元素，这是正确的方法。当它们嵌套在不同的元素中时，尝试突出显示交替的表行 () 对我特别有帮助。

【解决方案2】：

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

有两种方法可以做到：

方法一：

直接针对<div>s的每一层。

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

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

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

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

方法二：

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

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

【讨论】：