CSS: h1, h2, h3多个选择器+单独的h2 ..顺序很重要

Question

这就是我的问题。为了提高效率，我将所有的标题标签都设置为相同的字体族。所以我用了下面的代码。然而，只有当多个选择器代码在单个h2代码之后才会起作用。

如果我将多选择器代码放在h2代码之前，那么它会完全忽略它。有什么想法，我错过了什么?下面是测试页面的链接:

http://www.jasonkoprowski.com/test/JK_Test.html

我希望标题显示使用'深红色文本'字体，但似乎默认为'Times New Roman'(甚至不确定它从哪里得到这个实际上。它的工作发现，当我把h1, h2, h3, h4, h5代码后，但不是之前。我想我可以把它放在h2标签代码之后，但我想确保我理解问题的根本原因:

h1, h2, h3, h4, h5 { 
   font-family:"Crimson Text", "Lucida Sans Unicode","Times New Roman", serif;
}

h2 {
  color:#232323;
  font-style:normal;
  font-weight:500;
  letter-spacing:-1px;
  line-height:1.1em;
  margin:30px 0;
  text-align:center;
  font-size:42px;
} 

添加更多的我的困惑，当我添加代码到code Pen (http://codepen.io/anon/pen/EDpJg)它看起来是正确渲染…我的网站有问题吗?

如果您能提供任何帮助，我将不胜感激。

谢谢你,

Koprowski

Answer 1

问题不在于选择器或规则的顺序(尽管通常有时确实很重要)，而在于样式表开头和结尾的<style>标记:

<style type="text/css">

和

</style>
<!--CSS END-->

属于HTML页面，而不属于CSS工作表。此外，开始标记会干扰您的h1, h2, h3, h4, h5规则。