时间戳

首页 > 解决方案 > CSS 正文作者样式不适用，无法覆盖用户代理样式表

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

问题描述

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

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

如果需要，您可以通过此链接下载该项目。

如果我注释掉 * 和 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？是什么导致了这个问题？

标签： htmlcss

解决方案

这很奇怪。我复制，打开，关闭文件十次。然后将 html 选择器删除（未注释）并再次重写。这解决了这个问题。我以前从未见过这样的事情。

推荐阅读