0

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

我在我的应用程序中使用 Meyers 重置。但是当我编辑我的主 css 文件以更改 h1 字体大小时，它不会更改它。但是当我把它放在body标签中时它就起作用了。谁能给我解释一下？

例子

base.css.scss

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

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

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

5 回答 5

2

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

于 2014-04-10T14:59:51.687 回答
1

There are three possible causes to this issue. First, make sure you are not trying to use SASS in the browser. It will need to be fully converted to plain CSS before you can use it there. Second, make sure the selector you're using has a higher specificity. That is, make sure the selector is more specific than another selector setting the property. body h1 has a higher specificity than just h1. Though, in Meyer's reset, that shouldn't be a problem. Third is order. If two selectors have the same level of specificity, the one that comes later gets priority. Make sure your reset comes before any other CSS on your page.

于 2014-04-10T15:00:38.537 回答
0

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

于 2014-04-10T14:58:41.913 回答
0

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

于 2014-04-10T14:59:50.903 回答
0

The issue you are having is two-fold. There is a specificity issue as well as a cascading issue. You aren't going to be able to override a style before it is declared without using and !important. So your override should be after the reset.

You will also want to match the selector you are trying to override. So if your reset is targeting the element with the body and h1 selectors, do the same to override the styles.

body h1 { font-size: 2em; }
于 2014-04-10T15:01:05.500 回答