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;
}

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

3 个答案: