CSS正文作者样式不适用，不能覆盖用户代理样式表

Question

我在HTML根元素中设置了font-size，以便在项目中使用rem单位。在那之后，我不能在body元素上应用任何样式。检查器显示它正在使用用户代理默认样式表。其他样式也适用，但是body元素完全失效了。

在Chrome、Firefox和Safari中也是如此。此外，字体系列、颜色、填充等都损坏了。

如果需要，您可以通过this link下载该项目。

如果我注释掉*和HTML选择器，padding family又回来了，但是rems是不正确的，因为默认的16px字体大小。

​

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #777;
  padding: 30px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="shortcut icon" type="image/png" href="img/favicon.png">
  <title>Natours</title>
</head>

<body>
  <header class="header">
    <div class="logo-container">
      <img src="./img/logo-white.png" class="logo" alt="natours logo">
    </div>

    <div class="heading-container">
      <h1 class="heading-primary">
        <span class="heading-primary-main">Outdoors</span>
        <span class="heading-primary-sub">is where life happens</span>
      </h1>

      <a href="#" class="btn btn-white btn-animated">Discover our tours</a>
    </div>
  </header>
</body>

</html>

​

如何正确设置根字体大小以使用rems？是什么导致了这个问题？

Answer 1

这很奇怪。我复制，打开，关闭这个文件大概十次了。然后删除(而不是注释)掉html选择器，然后重写它。这解决了这个问题。我以前从来没有见过这样的事情。