Question

我有这个HTML结构，主要由嵌套的div组成。我需要根据嵌套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;
}

是否有一种更有效的方法来选择备用缩进嵌套标签，因为我们很想知道？

Answer 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;
}

Answer 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（奇数）和nth-child（偶数）伪选择器。你需要重写你的标记，以使你的所有元素成为彼此的兄弟姐妹。

Answer 3

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

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

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

Jsfiddle demo

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

3 个答案: