Css 如何使字体变大，仅在第一个标题和第二个标题之间？

我正在寻找一种使用CSS在

div

中的前两个标题之间设置样式的方法。例如：

<div id="content">
  <h1>First</h1>
  <p>Big.</p>
  <p>Big.</p>
  <ul>
    <li>Big.</li>
    <li>Big.</li>
  </ul>
  <h2>Second</h2>
  <p>Normal.</p>
  <p>Normal.</p>
  <p>...</p>
  <h2>Third</h2>
  <p>Normal.</p>
  <p>Normal.</p>
  <p>...</p>
</div>

但这似乎比它可能需要的更加乏味和脆弱。什么是更好的方法？

在Chromium（Ubuntu 11.04）上，通用同级选择器似乎可以实现您的目标：

h1 ~ * {
    font-size: 2em;
}

h2,
h2 ~ * {
    font-size: 1em;
}​

当然，这仍然需要对底层结构的了解，但至少不像您在问题中所展示的相邻兄弟选择器那么多

---

正如@BoltClock在评论中所指出的，出于性能原因，最好避免使用

*

选择器，而使用

:not（）

选择器来识别同级：

h1 ~ :not(h2) {
    font-size: 2em;
}

h2 ~ :not(h2) {
    font-size: 1em;
}​

参考资料：

---

在没有看到其他内容的情况下，我的假设是你需要非常具体（正如你在问题中所写的那样）。否则，您将面临这些规则在其他地方显示为不需要的风险

它是否始终是一个

h1

后跟一个

h2

？是否只有

p

和

ul

元素？这有助于缩小范围。您可以使用JavaScript调整内容吗？+1使用

*

作为键选择器，并在3中使用组合符。。。2.1…如果您不想为后续的

h2

元素设置样式，可以在第二条规则中使用

h2~：not（h2）

。或者要让大家闭嘴，只需同时使用

h1~:not（h2）

和

h2~:not（h2）

。或者，你知道，你可以。。。用

p

、

ul

和任何其他附带的元素重复整个过程。但说真的：

*

坦白说并不那么慢。即使它很慢，那么

：not（h2）

也可能同样慢。大多数对

*

选择器性能的指责都是毫无根据的，唯一应该担心这些事情的人是浏览器供应商。

h1 ~ :not(h2) {
    font-size: 2em;
}

h2 ~ :not(h2) {
    font-size: 1em;
}​