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 .