1

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

 #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 项必须使用某些特定的类样式或其他东西。

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

4

3 回答 3

6

您的第二个选择器没有第一个选择器那么具体，因此即使在您的 CSS 文件中第二个选择器位于第一个选择器之后，也会应用第一个选择器。

在此处（Chris Coyier 撰写的博客文章）和此处（W3C 规范）阅读更多关于特异性 的信息。

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

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

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

我不建议将!important修饰符添加到您的 css 命令中。它应该谨慎使用（如@Cody Guldner 所述）。真的，你的 CSS 应该简洁明了。大量使用!important只会让自己为将来的更多工作做好准备。就个人而言，我只将它用于错误修复和实验。

于 2013-01-04T03:16:33.500 回答
1

eventTitle将不会应用，因为#body .article h2它比类更具体，您可以尝试将您的类样式更改为

.eventTitle { 字体大小：28px !important; 颜色：黑色！重要；}

使其优先于更具体的#body .article h2

于 2013-01-04T02:52:00.473 回答
0

更改.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  }

希望这可以帮助

于 2013-01-04T02:52:31.130 回答