css - 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（而不是even）。

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

---

编辑：

我尝试了一点，我认为纯 CSS 不可能（但我很高兴被证明是错误的）：伪元素将始终引用tr表中的所有元素（使用oddand even），并且最后一个声明将覆盖前一个......恕我直言，唯一使用 CSS 的唯一方法是在每个标题之后为每个案例创建一个静态声明adjacent selector，这只有在每个标题都有少量、已知、固定数量的内容时才可行（假设是 5 或 10 ...)，如下所示：

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应用于trs，并相应地为它们着色。