使用新样式类覆盖css标题

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文件中的第一个选择器之后,也会应用第一个选择器.

在这里阅读更多关于特异性的 信息(Chris Coyier撰写的博客文章)和这里(W3C规范).

这是一个非常有趣的漫画,几乎总结了特异性的概念.

我的建议:尝试#body在第一个选择器中取出(除非有一个很好的理由,它首先在那里).然后尝试将第二个选择器更改为

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

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