Question

我很好奇为什么第二种颜色会被第一种颜色覆盖？有没有办法通过不添加!important或将其包装在正文类中？

body.football h3 {
   color: #a07a40;
}

footer h3 {
   color: white;
}

Answer 1

如果存在两个针对同一元素的选择器，则级联样式表将采用分层方案。更具体的一个将优先。

然而，你的身体可能不应该像这样上课，这是最好的做法。它乞求头痛。

您的选择：

快速而肮脏，您可以使用后代选择器>来指定直接子项。例如：

body.football > h3 {
   color: #a07a40;
}

footer > h3 {
   color: white;
}

<body class="football">
    <h3>Football is the Bees Knees</h3>
    <footer>
        <h3>Hi Ma Hi Pa</h3>
    </footer>
</body>

或者，根据您的OP，您还可以将正文内容包装在一个部分或div中，并将样式应用于IE：

section#football h3 {
   color: #a07a40;
}

footer h3 {
   color: white;
}

<body>
    <section id="football">
        <h3>Football Yo</h3>
    </section>
    <footer>
        <h3>Yo Football</h3>
    </footer>
</body>

编辑：我应该补充一点，两个元素之间的空格意味着你将要点击所有作为父元素后代的元素。

Answer 2

它被覆盖，因为css将使用最具体的选择器而非任何其他选择器。

要解决此问题，您需要使用!important标记或更改页脚选择器更具体，最简单的方法是使用ID。

一个例子：

#footer h3{
    color: white;
}

<footer id='footer'><h3></h3></footer>

Answer 3

CSS喜欢在不太具体的声明上更喜欢更具体的声明。没有看到附带的HTML可能有点难以确定，但很可能是因为你的body.football声明更具体。

Answer 4

编写代码或css结构时出现html错误。

HTML：

<body>
    <div class="football">
        <h3>ho</h3>
    </div>
    <footer>
        <h3>test</h3>
    </footer>
</body>

CSS：

body.football h3 {
   color: #a07a40;
}

footer h3 {
   color: red;
}

Fiddle上的示例。

或者如果足球是在页脚部分，那么你需要上课。

footer h3 {
   color: red;
}

footer .football h3 {
   color: #a07a40;
}

Fiddle

为什么身体类重写页脚html

4 个答案: