为何自定义样式表无法覆盖Normalize.css中<h1>的外边距

嘿，这个问题我太熟了！核心原因是CSS选择器的优先级在搞鬼～

你在自定义样式里用了通配符*选择器来设置margin: 0，但Normalize.css里是直接用h1标签选择器定义的外边距：

h1 { font-size: 2em; margin: 0.67em 0; }

在CSS的优先级规则里，标签选择器的优先级比通配符选择器高，哪怕你的样式表引用在Normalize之后，通配符的样式也会被优先级更高的h1标签选择器覆盖掉。

解决办法 #

给你几个靠谱的方案，按推荐程度排序：

• 直接用h1标签选择器写样式：优先级和Normalize里的h1一致，因为你的样式表后加载，所以会直接覆盖：

  h1 {
    margin: 0;
    /* 其他你需要的样式 */
  }
  

• 给h1添加类选择器：类选择器的优先级比标签选择器更高，能确保覆盖：
  先修改HTML：

  <h1 class="custom-heading">你的标题内容</h1>
  

  再在自定义样式表中写：

  .custom-heading {
    margin: 0;
  }
  

• 应急用!important（不推荐）：如果暂时不想调整选择器，可以给通配符里的margin加上!important强制覆盖，但这种方式会破坏CSS的优先级规则，后续维护容易出问题，尽量少用：

  * {
    box-sizing: border-box;
    color: #ddd;
    padding: 0;
    border: 0;
    margin: 0 !important;
    text-decoration: none;
  }
  

内容的提问来源于stack exchange，提问作者tommyzDad