html - 尝试在不引入另一个类的情况下使第一个 tbody 的样式不同于其他

Question

我有一个包含多个 tbody 的表，每个 tbody 都有一个分类行，我想要它以便第一个 tbody 中的分类行具有样式差异，但我无法让 tbody:first-child 在任何浏览器。也许我遗漏了什么，或者可能有解决方法。

理想情况下，我想为程序员提供一个单独的 tbody 部分，他们可以将其用作模板，否则将不得不向第一个 tbody 添加一个类，从而在编程中进行额外的测试。

html 很简单:

<tbody class="subGroup">
    <tr class="subGroupHeader">
        <th colspan="8">All Grades: Special Education</th>
        <td class="grid" colspan="2"><!-- contains AMO line --></td>
        <td><!-- right 100 --></td>
    </tr>
    <tr>...</tr> <!-- several more rows of data -->
</tbody>

每个表有几个 tbody。我想在第一个 tbody 中的 tr.subGroupHeader 中设置与其余部分不同的样式。只是为了说明，我想在 tr.subGroupHeader 单元格中添加一个 border-top。

tr.subGroupHeader 的样式将带有 border-top，例如:

table.databargraph.continued tr.subGroupHeader th, table.databargraph.continued  tr.subGroupHeader td {
    border-top: 6px solid red;
}

对于第一个 tbody，我正在尝试:

table.databargraph.continued tbody:first-child tr.subGroupHeader th {
    border-top: 6px solid blue ;
}

但是，这似乎在任何浏览器中都不起作用(我已经在 Safari、Opera、Firefox 和 PrinceXML 中测试过，都在我的 Mac 上)

奇怪的是，通常优秀的 Xyle Scope 工具指示蓝色边框应该优先，但显然不是。请参阅 http://s3.amazonaws.com/ember/kUD8DHrz06xowTBK3qpB2biPJrLWTZCP_o.png 处的屏幕截图

此屏幕截图显示(左上)美洲印第安人 th 已被选中，并且(右下)显示(通过黑色而不是灰色文本进行 css 声明)，确实应该优先考虑蓝色边框。然而边界是红色的。

我可能遗漏了一些基本的东西，比如伪类根本不适用于 tbodys...这真的只需要在 PrinceXML 和 Safari 中工作，这样我就可以看到我在用基于 webkit 的 css 工具做什么.

请注意，我确实尝试过像 tr.subGroupHeader:first-child 这样的选择器，但这样的 tr 显然将 tbody 视为父级(正如我所怀疑的那样)，从而使每个边框都变成蓝色。

谢谢...

Answer 1

对不起各位，但我要回答我自己的问题。但我非常感谢您的帮助。

代替:

table.databargraph.continued tbody:first-child tr.subGroupHeader th {
    border-top: 6px solid blue ;
}

我应该做的是:

table.databargraph.continued > tbody:first-of-type tr.subGroupHeader th {
    border-top: 2px solid blue !important ; 
}