CSS3：在某类tr之后重置备用表行着色

Question

这是我的小提琴。

http://jsfiddle.net/cnLDF/

我希望每个.content行后面的每个.heading行都以灰色开头，在本例中为“内容5”。

如何仅通过修改CSS来实现。

Answer 1

使用adjacent sibling selector（我使用红色进行演示）：

table tr.heading + tr.content {
    background: #f00;
}

但请注意，nth-child(even)会获胜，那么您只会为第一个.content着色，前面是.header，即odd（而不是{{1} }}）。

演示：http://jsfiddle.net/cnLDF/1/

---

编辑：

我已经尝试了一下，我认为纯CSS不可能（但我会很高兴被证明是错误的）：伪元素将始终引用所有even元素table（带有tr和odd），最后一个声明将覆盖前一个...仅CSS的唯一方法是使用even为每个案例创建一个静态声明每个标题，只有当你有一个小的，已知的，固定数量的内容为每个标题（比方说5或10 ......）时，这是可行的，如下所示：

adjacent selector

如果您可以处理输入，则可以轻松计算输出服务器端，将table tr.heading + tr.content > td {/* stuff */ } table tr.heading + tr.content + tr.content > td {/* stuff */ } table tr.heading + tr.content + tr.content + tr.content > td {/* stuff */ } /* and so on... */ 和"odd" "even"应用于classes，并相应地着色它们。< / p>