h2标记字体大小被浏览器重写

Question

我有一个h2元素与类和适当的字体大小样式。它在MAC桌面的Chrome上真的很奇怪，因为h2元素标签内部正在打印，它使用我的全局样式“*”。我该如何解决？这是我的原始代码：

* {
  font-size: 14px;
  font-size: 1.4rem;
  box-sizing: border-box;
}

h2.ttl {
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

<h2 class="ttl">
  text<br>
  <span>column</span>
</h2>

Answer 1

基于html片段，它看起来不像你需要选择器中的其他类只尝试h2.ttl选择器。

<style>
* {
    font-size: 14px;
    font-size: 1.4rem;
    box-sizing: border-box;
}
h2.ttl {
    font-size: 28px;
    font-size: 2.8rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 1.2;
}
</style>

<h2 class="ttl">
 text<br>
 <span>column</span>
</h2>

Answer 2

根据您编写的示例，似乎h2未被正确选择，但是如果h2位于kasoumv和text类中，您可以尝试通过使用链接h2类来强制该样式：

h2.ttl.ttl

这就像使用！important属性，但不那么hacky。

Answer 3

在*上设置显式字体大小是一种非常糟糕的做法。它将始终覆盖任何元素的子元素的大小。最好像这样设置它：

* {
 font-size: inherit;
}

body {
 font-size: 16px;
}

如果您坚持使用通用选择器显式字体大小，则可以使用

h2.ttl,
h2.ttl * {
  font-size: 28px;
}