CSS字体系列不适用于h1 [关闭]答案

【问题标题】：CSS font-family is not applied to h1 [closed]CSS字体系列不适用于h1 [关闭]
【发布时间】：2021-11-30 23:55:57
【问题描述】：

我通过 CSS 添加了 font-family，它应用于 body 但 h1 没有改变。下面的代码块显示了 CSS 和示例 HTML：

body{
  text-align: center;
  margin: 0;
  font-family: 'Verdana', sans-serif;
}

.h1{
  color: red;
  width: 10%;
  margin: 0 auto;
  font-family: "Times New Roman", Times, serif;
}

    <link rel="preconnect" href="https://fonts.googleapis.com">
  <body>
    <div class="top-container">
    <img class="top-cloud"  src="img/cute-cloud.png" alt="happy-cloud">
    <div class="text1">
      <h1>Test</h1>
      <h2>I am a <span class="pro">pro</span>grammer </h2>
    </div>
  </body>

你能检查一下我的代码有什么问题吗？

【问题讨论】：

在你的css中删除h1之前的点。
移除 Dot h1{ color: red;宽度：10%；边距：0 自动； font-family: "Times New Roman", Times, serif; }

标签： html css web-frontend font-family

【解决方案1】：

.h1 以 class h1 为目标，以所有<h1> 为目标，删除点：

h1 {
  color: red;
  width: 10%;
  margin: 0 auto;
  font-family: "Times New Roman", Times, serif;
}

body{
  text-align: center;
  margin: 0;
  font-family: 'Verdana', sans-serif;
}

h1{
  color: red;
  width: 10%;
  margin: 0 auto;
  font-family: "Times New Roman", Times, serif;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
  <body>
    <div class="top-container">
    <img class="top-cloud"  src="img/cute-cloud.png" alt="happy-cloud">
    <div class="text1">
      <h1>Test</h1>
      <h2>I am a <span class="pro">pro</span>grammer </h2>
    </div>
  </body>

w3 CSS Selectors overview

【讨论】：

不要不要回答由拼写错误引起的问题。请改用评论选项并将问题标记为not reproducable or caused by typos。这样的问题对社区没有任何价值，因此从 SO 中删除。因此，所有授予的声誉也会被恢复。因此，没有理由在遵守 SO 准则的同时猎取声誉。
你怎么知道这是一个错字，而不是对 css 选择器的误解？
即使这样，评论也足够了，同样的标志也适用。这个问题仍然没有任何价值。

【解决方案2】：

.h1{
}

表示您已生成名称为“h1”的 css 类，它将应用于 html 元素，就像应用 css 类一样，即

<h1 class="h1"></h1>

并且这只会应用于那些你应用了类属性的h1标签，如果你想将css应用到你使用这个css样式的文件中的每个h1元素，那么元素名称将被提及在没有. 或# 的css 中如下：

h1{
}

这完全取决于您的选择。

【讨论】：