我有嵌套的 div，需要一种更有效的方式来选择它们答案

【问题标题】：I have nested divs and need a more efficient way of selecting them我有嵌套的 div，需要一种更有效的方式来选择它们
【发布时间】：2014-08-20 13:38:39
【问题描述】：

我有这个主要由嵌套 div 组成的 HTML 结构。我需要根据嵌套 div 的位置交替颜色。所以父母必须是一种颜色，孩子必须是另一种颜色，因此根据嵌套元素交替。

<div class="indent">
    <div class="indent">
        <div class="indent">
            <div class="indent">
                <div class="indent"></div>
            </div>
        </div>
    </div>
</div>
<div class="indent">
    <div class="indent">
        <div class="indent"></div>
    </div>
</div>
<div class="indent">
    <div class="indent"></div>
</div>

我有这个 CSS，我需要弄清楚如何改进以更有效地选择交替嵌套标签。

.indent{
    padding-bottom: 20px;
    padding-right: 10px;
    background:#dfdfdf;
}
.indent > .indent{
    background:#fff;
}
.indent > .indent > .indent{
    background:#dfdfdf;
}
.indent > .indent > .indent > .indent{
    background:#fff;
}
.indent > .indent > .indent > .indent > .indent{
    background:#dfdfdf;
}

有没有更有效的方法来选择替代缩进嵌套标签，因为很想知道？

【问题讨论】：

您可以根据级别使用id或其他类
你可以试试nth-child()
真的...5 层深吗？这种打破了“初始”规则:)
@Benjamin nth-child 在这种情况下不起作用。
在这种情况下，最好将类重命名为 'indent-1', 'indent-2', 'indent-3', 等...

标签： html css css-selectors

【解决方案1】：

我会为 div 添加一个额外的类。保留indent 类作为通用标记，并添加level-1、level-2、level-3、level4 等类...

我认为没有可以让您指定级别的 CSS 选择器。

在您当前的设置中，indent > indent 不仅会匹配第二级的 div，还会匹配第三级和第四级的 div。只要您在更具体的选择器中覆盖所有声明的属性，这不是问题，但是如果您想让仅级别 2 的字体更大，则必须显式将级别 3 的字体变小。

但是如果你不能添加 level 类，那就是你必须做的，因为没有更好的选择器可以让它更容易。

您可以像这样使用多个选择器，因此您可以通过仅添加一个额外的选择器来添加额外的级别：

.indent {
    padding-bottom: 20px;
    padding-right: 10px;
}

.indent > .indent,
.indent > .indent > .indent > .indent {
    background: #fff;
}

.indent,
.indent > .indent > .indent,
.indent > .indent > .indent > .indent > .indent {
    background: #dfdfdf;
}

【讨论】：

我正在使用插件，不想更改插件调用。
这是最合乎逻辑的方式......但据我了解，这些类很可能必须与 JS 一起应用。
是的，我意识到这一点，只是想知道是否有一种更有效的方法可以在不使用 javascipt 或添加类的情况下做到这一点
@Andrew_tainton 在那种情况下，恐怕答案是“不”。
您可以通过提供.indent { background: #dfdfdf; } 然后使用第二条规则.indent > .indent ... 将颜色交替为白色来简化这一点，就像上面一样。

【解决方案2】：

如果你将你的类分开，这样你就有了原始的缩进类，然后是另一个只应用颜色的类，你可以清理很多东西。这是一个例子：

<div class="indent grey">
    <div class="indent white">
        <div class="indent grey">
            <div class="indent white">
                <div class="indent grey"></div>
            </div>
        </div>
    </div>
</div>
<div class="indent grey">
    <div class="indent white">
        <div class="indent grey"></div>
    </div>
</div>
<div class="indent grey">
    <div class="indent white"></div>
</div>

然后你的 CSS 你被简化为：

.indent{
    padding-bottom: 20px;
    padding-right: 10px;
}

.white{
    background:#fff;
}

.grey{
    background:#dfdfdf;
}

或者，您可以利用 nth-child(odd) 和 nth-child(even) 伪选择器。但是，您需要重写标记以使所有元素彼此成为兄弟。

【讨论】：

@Paulie_D 你是对的。 nth-child 不适用于当前的 HTML。正如我上面所说，您需要重组标记，以便 .index 元素是兄弟元素。

【解决方案3】：

一种选择是使用具有不透明度值的背景颜色。

每个连续的级别都会通过不透明度值的累积导致“不透明度”降低

.indent {
    padding-bottom: 20px;
    padding-right: 10px;
    border:1px solid grey;
    background:rgba(0, 0, 0, 0.1);
}

Jsfiddle demo

【讨论】：

那不会交替背景吧？
不...但它确实区分了它们并指示了嵌套级别。这是一个选项...不是一个精确的解决方案。