重置不要让我改变H1大小

Question

所以这是一个我似乎无法弄清楚的奇怪的错误。

我在我的应用中使用Meyers重置。但是当我编辑我的主css文件来改变h1字体大小时，它不会改变它。但是，当我把它放在身体标签时，它的工作原理。有谁能解释一下这个？

实施例

base.css.scss

h1 {
 font-size: 2em;    //--This doesnt work
}

body {
     width: 100%;
     height: 100%;

    h1 {
     font-size: 2em;  //-- This works
    }
}

Answer 1

确保在base.css.scss文件之前包含重置文件。看起来它会覆盖h1规则。

Answer 2

此问题有三种可能的原因。首先，确保您没有尝试在浏览器中使用SASS。它需要完全转换为纯CSS才能在那里使用它。其次，确保您使用的选择器具有更高的特异性。也就是说，确保选择器比设置属性的另一个选择器更具体。 body h1的特异性高于h1。虽然，在迈耶的重置中，这不应该是一个问题。第三是订单。如果两个选择器具有相同的特异性级别，则稍后出现的选择器将获得优先级。确保在页面上的任何其他CSS之前重置

Answer 3

您已重新定义，因此H1的第二次分配不起作用，尽管您可以使用！很重要，但我最好不要

Answer 4

因为第二个特征比第一个更具特异性：在这种情况下body h1的权力大于h1

Answer 5

您遇到的问题有两方面。存在特异性问题以及级联问题。在不使用和!important的情况下声明样式之前，您无法覆盖样式。所以你的覆盖应该在重置之后。

您还需要匹配您要覆盖的选择器。因此，如果您的重置定位到包含body和h1选择器的元素，请执行相同操作以覆盖样式。

body h1 { font-size: 2em; }