不知何故，我无法覆盖 normalize.css？答案

【问题标题】：Somehow i am unable to override normalize.css?不知何故，我无法覆盖 normalize.css？
【发布时间】：2020-01-16 03:15:31
【问题描述】：

Screenshot CSS code

我是初学者，不知何故我无法从 h1 元素中删除边距。我不知道问题是什么。

<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="Resources/css/style.css">
  <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
  <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
  <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400&display=swap" rel="stylesheet">
  <title>Omnifood</title>
</head>

<body>
  <header>
    <div class="hero-text-box">
      <h1>Goodbye junk food. Hello super healthy meals.</h1>
      <a href="#">I’m hungry </a>
      <a href="#">Show me more </a>
    </div>
  </header>

</body>

</html>

【问题讨论】：

标签： html css normalize

【解决方案1】：

重新排序您的链接标签如下

<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> <!-- reset default styling -->
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css"> <!-- add grid support -->
<link rel="stylesheet" type="text/css" href="Resources/css/style.css"> <!-- apply custom styles to your code -->

【讨论】：

【解决方案2】：

您可以将style.css 重新排序到normalize.css 之后，或者您可以使用!important 强制CSS：

h1 {
  margin: 0 !important;
}

【讨论】：

【解决方案3】：

这里有三种可能的解决方案：

1- 在您的 HTML 中，首先包含 normalize.css，然后是其他将覆盖它的 CSS 文件：

<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">

2- 您可以通过在style.css 文件中使用更精确的选择器来覆盖normalize.css 的样式属性。例如，假设您的 h1 位于类 container 的 div 中，您可以这样做：

.container h1 {
    margin: 0;
}

由于.container h1 比normalize.css 中的h1 选择器更精确，该属性将被自动覆盖。

3- 如果这些都不适合您，您可以使用!important 强制覆盖边距属性，如下所示：

h1 {
    margin: 0 !important;
}

【讨论】：

【解决方案4】：

首先重新排序您的资源文件，然后在您的 css 中简单地使用下面的内容。记下 px 部分。

<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> 
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">

CSS 代码

h1 {
  margin: 0px;
}

【讨论】：