设置除 etc 以外的所有文本的字体大小<h1> <h2>

Question

我正在将CSS应用于页面的一个框，该框可能包含<div> <table> <p>和其他元素，并且只是纯文本。

我希望所有文本的字体大小相同，但标签中的文本除外，例如 <h1> <h2> <h3>

使用对象id"mybox"，我的简单CSS字体修饰符是

.mybox * {
font-size: 13px;
}

问题是这也设置了任何<h2>元素的字体，依此类推。我可以向我的 <h2> 元素添加一个类，并添加另一个选择器来再次覆盖字体大小，但这感觉非常倒退。

解决这个问题

的好方法是什么？

我找到了适用于类的 not（） 选择器，但我找不到像 <h2> 这样的 html 元素将它们从我的"全局"字体修饰符中排除

Answer 1

将:not选择器与那些"不需要的"元素一起使用：

.mybox *:not(h1):not(h2):not(h3) {
  font-size: 13px;
}

<div class="mybox">
  <h1>foo</h1>
  <h2>bar</h2>
  <h3>Hans</h3>
  <label>Gruber</label>
  <p>Goku</p>
  <div>Yoda</div>
</div>

JSFiddle

Answer 2

您可以在body上设置字体样式，并为不包含样式添加:not(h1):not(h2)。

Answer 3

在body中设置所需的文本大小，然后设置您想要的标题：

body{
  font-size: 16px;
}
h1{
  font-size: 50px;
}
h2{
  font-size: 35px;
}

<p>text</p>
<h1>header 1</h1>
<h2>header 2</h2>

Answer 4

像其他人建议的那样，主要有两种方法可以做到这一点，要么是向h1添加:not选择器并h2标签，要么只是为这些标签提供单独的字体大小。

.mybox:not(h1):not(h2) {
   font-size: 14pt;
}

或者，我要做的是利用CSS级联性质。这意味着您为元素提供的任何属性都会覆盖您以前可能为其提供的任何属性。所以这是如何做到这一点：

body {
  font-size: 12pt;
}
.mybox h1 {
  font-size: 18pt;
}
.mybox h2 {
  font-size: 16pt;
}

在这里，请务必先声明body属性，然后声明h1和h2标记。