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和3以及段落1、2、3、5和6将是黑底白字；其他部分将是白底黑字。

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

- Qwertie

---

你可能需要使用JavaScript/jquery。 - brietsparks

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"});

- DRD

Answer 2

不幸的是，由于 CSS 是一种标记语言而不是编程语言，它不适合处理动态内容。

如果您知道段落和标题的数量，那么可以按照以下方式硬编码样式：

CSS：

h3:nth-of-type(1) ,h3:nth-of-type(1) ~ p{
    background:black;
    color:white;
}
h3:nth-of-type(2) ,h3:nth-of-type(2) ~ p{
    background:white;
    color:black;
}
h3:nth-of-type(3) ,h3:nth-of-type(3) ~ p{
    background:black;
    color:white;
}
h3:nth-of-type(4) ,h3:nth-of-type(4) ~ p{
    background:white;
    color:black;
}

实时示例：演示

然而，如果您不知道要有多少标题/段落，则必须借助JavaScript。

或者，您可以继续编写样式，直到nth-of-type(100)，我很确定您的文本中不会超过100个标头。但我强烈反对这样做，最好使用JavaScript。

更新

好的，在“填充”难看的空白处方面，有许多技巧：
其中一种是删除标题和段落的边距，但增加行高以创建人工行间距：

p,h3{
    line-height:2em;
    margin-top:0;
    margin-bottom:0;
}

另一个技巧是使用CSS3伪选择器:after创建一个庞大的黑/白背景块，以隐藏空格。但这种方法较为繁重和复杂。已在演示页面中更新了第一种技巧。以下是如何利用:after选择器隐藏不美观背景的示例：:Demo。

- Banana

---

嘿，这是个不错的技巧！但我猜在不改变或不知道继承边距的情况下，在黑色段落之间“填充”丑陋的白色空间可能会很困难，而且还可能有其他需要更改颜色的元素，例如 ul、ol、backquote 等等...所以只能用 Javascript 来实现。 - Qwertie

其实，你仍然可以把这个搞定 xD，我会在上电脑后写一个例子（现在在手机上）。 - Banana

哦，太好了:D 我知道标题远远不到100个，所以如果CSS可以正确工作的话，我更喜欢使用CSS解决方案。 - Qwertie

Answer 3

虽然一些用户提供了一些“解决方案”来完成原始问题的请求，但真正的问题在于HTML的结构。换句话说...由于您想要对内容进行视觉样式设置，因此应该最初将内容分组到某种父元素（例如div，ul，article等）中。一旦以这种方式设置了内容，CSS有各种处理此类请求的方法，这些方法完全合理，不像大多数建议的“解决方案”，这些解决方案依赖于预先了解您将拥有多少个h3或p，或者使用脚本来解密在您的HTML结构中应该已经明显的内容。

大多数CMS都提供了一些方法来允许预定义的HTML元素保持完整，从而可以使用它们。

修复真正的问题（HTML结构）应该是您的重点，而不是用更糟糕的CSS来涂抹糟糕的标记。也许可以将一堆粪便涂成美味的芝士汉堡，但任何试图食用它的人都会感到非常失望。

- Nick Saemenes

---

HTML 结构没有问题 - 它是完全标准的。将标题及其相关内容包装在 div 中 不 正常。此外，更改 HTML 可能会很困难，因为源文本是 Markdown 而不是 HTML，并且从 MD->HTML 的转换是由 GitHub 而不是我完成的（尽管 GH 最近切换到了允许包含 MD 的 HTML 标签的 Kramdown，所以现在可能更容易了）。你说对了一件事 - 这里提出的解决方案效果不太好。似乎 Javascript 是正确的方法。 - Qwertie