Question

我正在寻找一种方法来使用CSS来设置div中前两个标题之间的所有内容。 E.g：

<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

On Chromium（Ubuntu 11.04），一般的兄弟选择器似乎达到了你的目标：

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

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

JS Fiddle demo

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

正如@BoltClock所述，在评论中，避免*选择器（出于性能原因）并使用:not()选择器来识别兄弟姐妹可能更明智：

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

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

JS Fiddle demo

参考文献：

CSS Selectors, at the W3.org。

Answer 2

在没有看到其余部分的情况下，我的假设是你需要超级具体（正如你在问题中写的那样）。否则，你冒着这些规则出现在其他地方的风险，这是不需要的。

如何在第一个和第二个标题之间使字体更大？

2 个答案: