Question

我正在使用其中一个免费网页设计模板来创建自己的网站。该模板使用css样式表并定义了许多具有相似名称的不同样式。我定义了一些新的样式，但问题是新样式对我的页面没有影响。例如，这是其中一个块中的heading2的样式：

 #body .article h2 {
color: #ffaf04;
font-family: Georgia, serif;
font-size: 36px;
font-weight: normal;
letter-spacing: 2px;
line-height: 48px;
margin: 0;
padding: 0 48px;
text-align: center;
    }

我尝试添加并使用此样式

 .eventTitle { font-size:28px; color:black  }

但是当我使用

时

 <h2 class="eventTitle">something</h2>

来自#body .article的

样式不是eventTitle。

我想知道在CSS中可能有一些父母或某些父级样式的保护，或者某些div项目必须使用某些特定的类样式或其他东西。

我提前感谢所有评论和想法。

Answer 1

您的第二个选择器特定比第一个选择器少，所以即使第二个选择器位于CSS文件中的第一个选择器之后，第一个选择器也会应用。

详细了解特异性 here (a blog post written by Chris Coyier)和here (the W3C specs)。

Here is a very funny comic几乎总结了特异性的概念。

我的建议：尝试在第一个选择器中取出#body（除非有一个很好的理由，它首先出现在那里）。然后尝试将第二个选择器更改为

.article .eventTitle { font-size:28px; color:black  }

我不建议在您的css命令中添加!important修饰符。它应该谨慎使用（如@Cody Guldner所说）。真的，你的CSS应该干净简洁。使用!important很多只是为了将来做更多的工作。就个人而言，我只将其用于错误修复和实验。

Answer 2

eventTitle将不会被应用，因为#body .article h2比课程更具体，您可以尝试将班级样式更改为

.eventTitle {font-size：28px！important;颜色：黑色！重要; }

因此它优先于更具体的#body .article h2

Answer 3

将.eventTitle更改为#eventTitle。 ID总是覆盖一个类。除非元素具有256个具有相同样式的类;） http://codepen.io/chriscoyier/pen/lzjqh

你可以使用！important，但我不推荐它。

你也可以这样做

#body h2, .eventTitle {
font-family: Georgia, serif;
font-weight: normal;
letter-spacing: 2px;
line-height: 48px;
margin: 0;
padding: 0 48px;
text-align: center;
}
.article h2{
color: #ffaf04;
font-size:36px;
}
.eventTitle { font-size:28px; color:black  }

希望这有帮助

使用新样式类覆盖css标题

3 个答案: