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

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

直播示例： Demo

但是，如果你不知道你将有多少标题/段落，你将不得不诉诸JavaScript。

或者，您可以继续编写样式nth-of-type(100)，我很确定您的文字中不会有超过100个标题。但我强烈反对这一点，更好地使用javascript。

<强>更新

好吧，为了“填补”丑陋的白色空间，有很多技巧：一个是删除标题和段落的边距，但增加行高以创建人造行空间：

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

另一个技巧是使用css3伪选择器:after在文本下创建一个巨大的黑/白背景块来隐藏空间xD但这是相当沉重和复杂的。

我更新了小提琴演示中的第一个技巧。

更新2

这是一个如何利用:after选择器隐藏丑陋背景的示例： 的 :after Demo

Answer 3

虽然有些用户提供了一些完成原始问题请求的“解决方案”，但真正的问题在于HTML的结构。换句话说...因为你想要在视觉上对内容分组进行样式化，你应该将内容分组在某种父元素中（例如div，ul，article等。）原来。一旦以这种方式设置内容，CSS就有多种方法来处理这样一个完全合理的请求，这与大多数这些建议的“解决方案”不同，这些“解决方案”依赖于对h3或{{{{{}的预知。 1}}你将拥有或一个脚本来破译HTML结构中应该已经显而易见的内容。

大多数CMS提供了一些方法来允许预定义的HTML元素保持不变，这样就可以使用它们。

修复真正的问题（HTML结构）应该是你的焦点，而不是用更糟糕的CSS绘制糟糕的标记。也许有可能把一堆便便画成美味的芝士汉堡，但任何试图消费它的人都会非常失望。

css - 交替款式造型？

3 个答案: