Question

我想分别更改div s的颜色，但不想使用以下css。

我使用的语法如下：

HTML：

<div id="wrapper"><div><div><div><div><div><div><div>

</div></div></div></div></div></div></div></div>

CSS：

div>div>div {background-color:yellow;}
div>div>div>div {background-color:green;}
div>div>div>div>div {background-color:indigo;}
div>div>div>div>div>div {background-color:violet;}
div>div>div>div>div>div>div {background-color:chocolate;}
div>div>div>div>div>div>div>div {background-color:brown;}

Answer 1

您最好/唯一简单的解决方案是使用Classes或Id并将它们附加到您的CSS表格中（根据Daniel的答案）。

HTML：

<div id="wrapper" class="ClassDiv1">
<div class="ClassDiv2">
<div class="ClassDiv3">
<div class="ClassDiv4">
<div class="ClassDiv5">
<div class="ClassDiv6">
<div class="ClassDiv7">
<div class="ClassDiv8">

CSS：

.ClassDiv1{background-color:yellow;}
.ClassDiv2{background-color:green;}
.ClassDiv3{background-color:indigo;}

等。

如果您希望1种颜色用于2个div标签，您可以按照自己的风格进行此操作：

.ClassDiv1 .ClassDiv2{background-color:brown;}

但严重的是，而是去W3Schools并学习一点CSS，因为它会帮助你很多！

Answer 2

使用命名约定。

.innerDiv1{
    background-color:yellow;
}

.innerDiv2{
    background-color:green;
}

.innerDiv3{
    background-color:indigo;
}

.innerDiv4{
    background-color:violet;
}

.innerDiv5{
    background-color:chocolate;
}

.innerDiv6{
    background-color:brown;
}

或者您可以使用LESS之类的预处理器并互相嵌套

.innerDiv{
    background-color:yellow;

    div{
        background-color:green;

        div{
            background-color:indigo;

            div{
                background-color:violet;

                div{
                    background-color:chocolate;

                    div{
                        background-color:brown;
                    }
                }
            }
        }
    }
}

Answer 3

我会上课：

.bg-yellow { background-color: yellow; }
...
.bg-brown { background-color: brown; }

HTML：

<div id="wrapper">
    <div class="bg-yellow"><div><div><div><div><div><div class="bg-brown">
    </div></div></div></div></div></div></div>
</div>

使用此解决方案可以更轻松地在检查HTML时识别元素的颜色。

如何设置嵌套div的样式

3 个答案: