我很好奇为什么第二种颜色会被第一种颜色覆盖？通过不在!important体类中添加或包装它有没有办法解决这个问题？
body.football h3 {
color: #a07a40;
}
footer h3 {
color: white;
}
如果存在两个针对同一元素的选择器,则级联样式表将采用分层方案.更具体的一个将优先.
但是,你的身体可能不应该像这样上课,这是最好的做法.这是令人头疼的问题.
你的选择:
快速而脏,您可以使用后代选择器>指定直接子项.例如:
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,您还可以将正文内容包装在section或div中并将样式应用于IE,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>
编辑:我应该补充说,两个元素之间的空白区域意味着您将要击中所有作为父元素后代的元素.