使用css选择器在嵌套表中选择tr中的所有td

Question

我想在tbody的第一个tr中选择所有td。我通常会这样做：tbody：first-child td - ＆gt;但是这给了我在图像上看到的结果，黄色就是结果。

我的HTML - 短版

我知道有未封闭的标签，但我从调试器中复制了它，因为所有内容都是由jquery生成的。有什么想法吗？

   <table class="wc-header">
    <thead>
        <tbody>
            <tr>
                <td rowspan="3">Medewerker 1</td>
                <td class="row_header">Van</td>
                <td class="hours" data-person="1" data-day="1" data-row="from">
                <input class="past selected" type="text" readonly="readonly">
                </td>
                <td class="hours" data-person="1" data-day="2" data-row="from">
                <td class="hours" data-person="1" data-day="3" data-row="from">
                <td class="hours" data-person="1" data-day="4" data-row="from">
                <td class="hours" data-person="1" data-day="5" data-row="from">
                <td class="hours specialday" data-person="1" data-day="6" data-row="from">
                <td class="hours specialday" data-person="1" data-day="7" data-row="from">
                <td class="hours" data-person="1" data-day="8" data-row="from">
                <td class="hours wc-today" data-person="1" data-day="9" data-row="from">
                <td class="hours" data-person="1" data-day="10" data-row="from">
                <td class="hours" data-person="1" data-day="11" data-row="from">
                <td class="hours" data-person="1" data-day="12" data-row="from">
                <td class="hours specialday" data-person="1" data-day="13" data-row="from">
                <td class="hours specialday" data-person="1" data-day="14" data-row="from">
                <td class="hours" data-person="1" data-day="15" data-row="from">
                <td class="hours" data-person="1" data-day="16" data-row="from">
                <td class="hours" data-person="1" data-day="17" data-row="from">
                <td class="hours" data-person="1" data-day="18" data-row="from">
                <td class="hours" data-person="1" data-day="19" data-row="from">
                <td class="hours specialday" data-person="1" data-day="20" data-row="from">
                <td class="hours specialday" data-person="1" data-day="21" data-row="from">
            </tr>
            <tr>
                <td class="row_header">Tot</td>
                <td class="hours" data-person="1" data-day="1" data-row="till">
                <td class="hours" data-person="1" data-day="2" data-row="till">
                <td class="hours" data-person="1" data-day="3" data-row="till">
                <td class="hours" data-person="1" data-day="4" data-row="till">
                <td class="hours" data-person="1" data-day="5" data-row="till">
                <td class="hours specialday" data-person="1" data-day="6" data-row="till">
                <td class="hours specialday" data-person="1" data-day="7" data-row="till">
                <td class="hours" data-person="1" data-day="8" data-row="till">
                <td class="hours wc-today" data-person="1" data-day="9" data-row="till">
                <td class="hours" data-person="1" data-day="10" data-row="till">
                <td class="hours" data-person="1" data-day="11" data-row="till">
                <td class="hours" data-person="1" data-day="12" data-row="till">
                <td class="hours specialday" data-person="1" data-day="13" data-row="till">
                <td class="hours specialday" data-person="1" data-day="14" data-row="till">
                <td class="hours" data-person="1" data-day="15" data-row="till">
                <td class="hours" data-person="1" data-day="16" data-row="till">
                <td class="hours" data-person="1" data-day="17" data-row="till">
                <td class="hours" data-person="1" data-day="18" data-row="till">
                <td class="hours" data-person="1" data-day="19" data-row="till">
                <td class="hours specialday" data-person="1" data-day="20" data-row="till">
                <td class="hours specialday" data-person="1" data-day="21" data-row="till">
            </tr>
        <tr>
        </tbody>
    <tbody>
    <tbody>
    <tbody>
</table>

修改

也许我应该解释一下我实际上要做什么。您在左侧看到的黑线是给TBODY的边界。我希望这条线具有表格的宽度，但是边框会被td的边框覆盖。也许还有其他解决方案吗？

CSS

[data-person] {
    border:1px solid #DEDEDE;
}


tbody tr:first-child td {
    background-color:yellow;
}

解决

我有td的覆盖问题。在我发布我的问题之后意识到这一点，请求帮助

提前致谢

Answer 1

使用

tbody tr:first-child td {/* your styles */}

Demo