html - 为什么正文类会覆盖页脚 html-6ren

html - 为什么正文类会覆盖页脚 html

转载作者：技术小花猫更新时间：2023-10-29 12:01:59

24

4

我很好奇为什么第二种颜色会被第一种颜色覆盖？有没有办法通过不添加 !important 或将其包装在 body 类中来解决这个问题？

body.football h3 {
   color: #a07a40;
}

footer h3 {
   color: white;
}

最佳答案

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

但是，作为最佳实践，您的 body 可能不应该像那样上课。真是让人头疼。

您的选择:

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

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>

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

关于html - 为什么正文类会覆盖页脚 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26129053/

24

4

0

文章推荐： CSS:为什么这个内联 block div 不显示在同一行上？

文章推荐： c++ - 使用 MXE gcc 构建 Qt 应用程序时缺少 std::mutex

文章推荐： html - 哪些浏览器支持

和

首页

博学

6Ren·AI

商城

html - 为什么正文类会覆盖页脚 html