尽管页脚已经声明了 CSS 类，但页脚中的字体发生了变化答案

【问题标题】：Font in footer changes despite footer already having CSS class declared尽管页脚已经声明了 CSS 类，但页脚中的字体发生了变化
【发布时间】：2022-02-11 19:14:49
【问题描述】：

我在https://jsfiddle.net/1s2mpba6/ 有一个使用带有 flex 的 DIV 的设计，但这里的主要问题与使用 webfonts 相关，一个区域，尽管没有 webfont，但似乎已被替换，即使使用了正文字体.

当它应该是 Helvetica 时，我得到了这个：

这些是 HTML 和 CSS 中似乎有问题的区域：

header.california-m {
  background-color: #B22222;
  border-radius: 10px;
  color: #FFF;
  padding: 30px;
  width: 840px;
}

footer.california-m {
  background-color: #333;
  color: #FFF;
  padding: 30px;
  width: 840px;
  margin-bottom: 20px;
}

footer.california-m h2 {
  margin-left: 20px;
}

@font-face {
  font-family: Fabriga Regular;
  src: url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.eot?v=1.1.0");
  src: url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.woff2?v=1.1.0") format("woff2"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.woff?v=1.1.0") format("woff"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.ttf?v=1.1.0") format("truetype"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.svg?v=1.1.0#Regular") format("svg");
  font-weight: 400;
  font-style: normal
}

@font-face {
  font-family: Fabriga Medium;
  src: url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.eot?v=1.1.0");
  src: url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.woff2?v=1.1.0") format("woff2"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.woff?v=1.1.0") format("woff"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.ttf?v=1.1.0") format("truetype"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.svg?v=1.1.0#Medium") format("svg");
  font-weight: 400;
  font-style: normal
}

@font-face {
  font-family: ATVFabriga;
  src: url("https://c.atcdn.co.uk/fonts/ATVFabriga.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

.columns-vehicleresult+h1,
h2,
h3 {
  font-family: Fabriga Regular, Helvetica, sans-serif;
}

.columns-vehicleresult .column p.autog1 {
  font-family: Fabriga Regular, Helvetica, sans-serif;
}

.columns-vehicleresult .column p.autog1 b {
  line-height: 16px;
}

.atc-type-picanto {
  font-family: ATVFabriga, Helvetica, sans-serif;
}

<footer class="california-m">
  <h2>1 Anytown Road, Anytown 1</h2>
  <h2>&phone; 555 0100</h2>
</footer>

但是，我没有为页眉或页脚使用字体系列，那么为什么这只发生在页脚上，我需要修复什么？

从功能上讲，它工作得很好，从美学上来说，这是一个小问题，欢迎提出建议！

除了使用 webfont 的 .columns-vehicle-result 之外，它应该与在 CSS 中声明的正文的其余文本一样在 Helvetica 中。

【问题讨论】：

页脚的内容是两个h2 元素，选择器.columns-vehicleresult + h1, h2, h3 的规则适用于这些元素。（您不知道.foo .bar, .baz 和.foo .bar, .foo .baz 之间的区别...？）
@CBroe：感谢您指出这一点。我删除了加号，但它仍然以相同的字体显示。
为什么要去掉加号？如果该规则的格式应该只适用于紧跟在.columns-vehicleresult 之后的标题元素，对于所有这三个标题级别 - 那么这将需要变为 .columns-vehicleresult + h1, .columns-vehicleresult + h2, .columns-vehicleresult + h3
@CBroe：脑雾一秒钟。您的答案是正确的，但由于某种原因我无法将其勾选为已接受，只能投票。忘记了我通过不使用类和加号将其应用于所有。现在我明白了。
这是一个问答网站，只接受答案，不接受讨论中的cmets。我添加了一个包含上述 cmets 内容的答案。

标签： html css

【解决方案1】：

页脚的内容是两个 h2 元素，选择器 .columns-vehicleresult + h1, h2, h3 的规则适用于这些元素。

如果该规则的格式应该只适用于紧跟在.columns-vehicleresult 之后的标题元素，对于所有这三个标题级别 - 那么这将需要变为

.columns-vehicleresult + h1, .columns-vehicleresult + h2, .columns-vehicleresult + h3 { }

【讨论】：