Question

我在HTML根元素中设置了字体大小，以在项目中使用rem单位。之后，我无法在body元素上应用任何样式。检查器显示它正在使用用户代理默认样式表。其他样式确实适用，但是body元素已完全损坏。

在Chrome，Firefox和Safari中相同。字体系列，颜色，填充等也都坏了。

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

如果我注释掉*和HTML选择器，则填充，字体系列又回来了，但是由于默认的16px字体大小，因此rems不正确。

* {
  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选择器中删除（未注释），然后再次重写。这解决了问题。我以前从未见过这样的东西。

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

1 个答案: