css - 交替部分样式？

Question

我想在黑底白字和白底黑字之间切换，每当 <h3> 时切换遇到了。这可能吗？例如，在下面的代码中，

<h3>Heading one</h3>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<h3>Heading two</h3>
<p>The fourth paragraph.</p>
<h3>Heading three</h3>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<h3>Heading four</h3>
<p>The seventh paragraph.</p>
<p>The eighth paragraph.</p>
<p>The ninth paragraph.</p>

标题一和三，以及段落 1、2、3、5、6 将是黑底白字；其他的将是黑底白字。

实际页面内容是用 Markdown 编写的，所以我不能简单地将一半的部分包装在 <div class="inverted"> 中。 (Markdown 中 HTML 标签的内容被解析为 HTML，但我希望它们被解析为 Markdown。)我知道 nth-of-type但它只影响标题本身。

Answer 1

以下不是最佳解决方案。但是，如果您确实知道一个标题后面可以跟一个最大数量的段落，那么这可以在不使用 JS 和 jQuery 的情况下普遍使用:http://jsfiddle.net/CG5fU/1/ .

CSS:

h3:nth-of-type(2n), 
h3:nth-of-type(2n) + p, 
h3:nth-of-type(2n) + p + p, 
h3:nth-of-type(2n) + p + p + p, 
h3:nth-of-type(2n) + p + p + p + p,
h3:nth-of-type(2n) + p + p + p + p + p, 
h3:nth-of-type(2n) + p + p + p + p + p + p,
h3:nth-of-type(2n) + p + p + p + p + p + p + p {
    background-color: #000;
    color: #fff;
}

还有一个 jQuery 解决方案:http://jsfiddle.net/CG5fU/3/ .

$("h3:nth-of-type(2n)")
    .nextUntil("h3")
    .andSelf()
    .css({"background-color": "#000", 
          "color": "#fff"});