Html 在不引入其他类的情况下，尝试使第一个tbody的风格与其他tbody不同_Html_Css

Html 在不引入其他类的情况下，尝试使第一个tbody的风格与其他tbody不同

html css

Html 在不引入其他类的情况下，尝试使第一个tbody的风格与其他tbody不同,html,css,Html,Css,我有一个包含多个tbody的表，每个表都有一个已分类行，我希望它使第一个tbody中的已分类行具有样式差异，但无法使tbody:first child在任何浏览器中工作。也许我遗漏了什么，或者可能有解决办法理想情况下，我想为程序员提供一个tbody部分，他们可以将其用作模板，但必须在第一个tbody中添加一个类，以便在编程中进行额外的测试 html非常简单： <tbody class="subGroup"> <tr class="subGroupHeader">

我有一个包含多个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，我正在尝试：

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

然而，这似乎在任何浏览器中都不起作用（我已经在Safari、Opera、Firefox和PrinceXML中进行了测试，所有这些都是在我的Mac上进行的）

奇怪的是，通常优秀的Xyle Scope工具表明蓝色边框应该优先，尽管它显然不是。请参见上的屏幕截图

此屏幕截图显示（左上）选择了美洲印第安人th，并且（右下）显示（通过黑色文本而不是css声明的灰色文本），事实上，蓝色边框应该优先。然而边界是红色的

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

注：我确实尝试了一个选择器，如Tr.Sub GeulePeaDe:第一个孩子，但是这样的TR显然考虑了父体（如我所猜想的），从而使每个边界都变成蓝色。

谢谢……

这个人真的是桌子上的第一个孩子吗？如果有任何其他元素是较早的同级元素（例如a thead？），则此操作将不起作用

我尝试了以下测试代码，它似乎很有效：

<html>
    <head>
        <style type="text/css">
        table tbody tr th {
            border-top: 6px solid red;
        }
        table tbody:first-child tr th {
            border-top: 6px solid blue;
        }
        </style>
    </head>
    <body>
    <table>
    <tbody>
        <tr><th colspan="2">Title</th></tr>
        <tr><td>Data</td><td>Data</td></tr>
    </tbody>
    <tbody>
        <tr><th colspan="2">Title</th></tr>
        <tr><td>Data</td><td>Data</td></tr>
    </tbody>
    <tbody>
        <tr><th colspan="2">Title</th></tr>
        <tr><td>Data</td><td>Data</td></tr>
    </tbody>
    </table>
</body>
</html>

这将选择所有直接跟随thead的人。

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

而不是：

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

您确实花了时间仔细地避开了所有

是的，有一个thead，使用thead+tbody的选择器在（至少）Safari和PrinceXML中对我有用，所以我的问题解决了！谢谢<代码> TAd+TBOSUT/CODE将按预期工作（字幕元素应该总是在AD之前，如果它存在），并且将得到浏览器的最广泛支持，或者您也可以使用：ByTBTW的第一个，而我认为这个问题的答案是因为它解决了我的即时问题，但我不确定您的逻辑是否正确，因为如果我理解正确的话，第一个子元素指的是第一个这样的元素，也就是说，thead对它的影响不应该比col标记对它的影响更大。谢谢Felipe，但正如我所说的，在这种情况下我不需要广泛的浏览器支持，只需要PrinceXML和webkit可选，这样我就可以在不不断生成pdf的情况下检查我的工作。
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 ; 
}