css - 我怎样才能使字体更大，就在第一个和第二个标题之间？

Question

我正在寻找一种使用 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>

我无法更改 HTML，所以不能，例如把更大的东西包在另一个里<div>或类似的东西。到目前为止，我能想到的最好办法是枚举第一个 <h1> 之后元素的可能性。 (对于一些元素)并使其变大，例如:

#content h1:first-child + p,
#content h1:first-child + p + p,
#content h1:first-child + p + ul,
#content h1:first-child + p + p + ul,
...
{ font-size: larger; }

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

Answer 1

在 Chromium(Ubuntu 11.04)上，通用兄弟选择器似乎可以实现您的目标:

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

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

JS Fiddle demo .

当然，这确实仍然需要底层结构的知识，但至少不像您在问题中展示的相邻兄弟选择器那么多。

---

正如@BoltClock 所指出的，在评论中，避免使用 * 选择器(出于性能原因)可能更明智，而是使用 :not() 选择器来识别 sibling :

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

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

JS Fiddle demo .

引用资料:

• CSS Selectors, at the W3.org .