定义h1样式后，h1类无法识别

Question

标题太模糊了？这是一个例子：

HTML：

<h1>Heading 1</h1>
<h1 class='header'>Heading 2</h1>

CSS：

h1 {
font-size: 2px;
}

.header {
font: 12px;
}

在网站上，标题1和标题2的字体大小均为2px。为什么是这样？ 是否存在我不知道的层次结构？如果是这样我在哪里可以阅读更多相关信息？因为我一直在寻找，但没有任何线索。

--- --- EDIT 好的拳头例子只是一个令人惊讶的愚蠢错误....感谢减-1。并且感谢您的回答破坏，尽管这只是一个纯粹的巧合，这发生在我的例子中。

因此，我现在将给出一个真实的例子，希望它不再是一件微不足道的事情。

HTML：

<div class="container-fluid">
<div id="content" class="product-info">
<div class="product_overview_wrapper span-fluid250-overview product-info">
<h3 style="heading_price" id="heading_price_id">PRICE:</h3>
</div>
</div>
</div>

CSS：

.product_overview_wrapper h3 , .product_overview_wrapper p {
font-family: 'Ovo', serif;
font-size: 1.1em;
font-weight: lighter;
color: #363636;
margin-top: 19px;
line-height: normal;
}

.heading_price {
margin-top: 100px;
}

如上所示，我之前提前一次称呼h3。但是我的.heading_price风格根本没有效果。当我检查元素时，我甚至没有在chrome中看到它...希望有人可以提供帮助，这不会再花费我的积分;）

Answer 1

更改

.header {
font: 12px;
}

到

.header {
font-size: 12px;
}

当您使用font时，它是一种速记，不能仅限于此大小。

请参阅reference：

  

使用CSS字体速记时几乎没有注意事项。如果这些   条件不符合，财产无效，完全是   忽略。除了使用关键字时，必须定义   字体大小和字体样式属性的值。