Question

这是一个带有一些样式的HTML页面。

<html>
<head>
    <style type="text/css">
        span {
            color: #FFF;
        }
        .light-gray span {
            background-color: #AAA;
        }
        .dark-gray span {
            background-color: #666;
        }
    </style>
</head>
<body>
    <div class="light-gray">
        <span>Text on light-gray background</span>
        <div class="dark-gray">
            <span>Text on dark-gray background</span>
            <div class="light-gray">
                <span>Text on light-gray background again</span>
            </div>
        </div>
        <div class="dark-gray">
            <span>More text on dark-gray background</span>
        </div>
    </div>
</body>
</html>

目标是创建多级结构，以便每个级别的元素使用上面示例中的两种颜色方案中的一种，浅灰色和深灰色。第一级是浅灰色，第二级是深灰色，第三级是浅灰色，依此类推。问题是应该是浅灰色的第3级span实际上是深灰色。我应该如何更改此页面的CSS以实现我的目标？

UPD ：样式化div中的元素可能位于不会改变颜色方案的容器中，例如：

<div class="dark-gray">
    <div>
        <div>
            <span>Text on dark-gray background</span>
        </div>
    </div>
    <div class="light-gray">
        <div>
            <span>Text on light-gray background again</span>
        </div>
    </div>
</div>

Answer 1

您在CSS中添加了两个组合。

    span {
        color: #FFF;
    }
    .light-gray span {
        background-color: #AAA;
    }
    .dark-gray span {
        background-color: #666;
    }
    .light-gray .dark-gray span {
        background-color: #666;
    }
    .dark-gray .light-gray span {
        background-color: #AAA;
    }

DEMO

Answer 2

为什么不为跨度本身分配样式：

span.light-gray { background-color: #AAA; }
span.dark-gray { background-color: #666; }

并将HTML更新为：

<div>
    <span class="light-gray">Text on light-gray background</span>
    <div>
        <span class="dark-gray">Text on dark-gray background</span>
        <div>
            <span class="light-gray">Text on light-gray background again</span>
        </div>
    </div>
    <div>
        <span class="dark-gray">More text on dark-gray background</span>
    </div>
</div>

Answer 3

添加了第二个要覆盖的类，请参阅以下示例

<div class="light-gray dark-gray">
                <span>Text on light-gray background again</span>
            </div>

在css中，优先级转到最后添加的类，因此它类深灰色覆盖类浅灰色

Answer 4

第二个类是覆盖，因为你使用css是错误的选择dom元素请参阅以下css代码

        .light-gray > span {
            background-color: #AAA;
        }
        .dark-gray > span {
            background-color: #666;
        }

Answer 5

您需要使用类似+＆gt;的CSS组合器〜

代码：

  <style type="text/css">
    span {
        color: #FFF;
    }
    .light-gray >span {
        background-color: #AAA;
    }
    .dark-gray >span {
        background-color: #666;
    }
 </style>

取决于选择器之间的关系

更改嵌套div中元素的样式

5 个答案: