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

【问题标题】：Select all td in tr in nested table with css selector使用css选择器在嵌套表中选择tr中的所有td
【发布时间】：2013-05-08 10:13:39
【问题描述】：

我想选择 tbody 的第一个 tr 内的所有 td。我通常会这样做：tbody:first-child td --> 但这给了我你可以在图像上看到的结果，黄色是结果。

我的 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 的覆盖问题。在我发布我的问题后意识到这一点，谢谢帮助

提前致谢

【问题讨论】：

未关闭的td、tr、thead 和tbody 标签不是问题——不用担心。但我看到多个tbodys - 你想只选择第一个tbody 中的第一行，还是选择任何第一行？
每个 tbody 中的任何第一行。一个 tbody 是一大行，正如您在图像中看到的那样，列标题为“Medewerker”
你能在 jQuery 输出中添加类吗？
是的，但这是我考虑的最后一个选项...如果没有人可以给我更简单的方法，我将添加课程。顺便说一句，谢谢大家
问题是样式被覆盖了。知道如何确保这种特殊风格优先于其他风格吗？ !important 不起作用。指定类和 id 的分机我已经完成...

标签： html css css-selectors html-table

【解决方案1】：

使用

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

Demo

【讨论】：

在我提供的演示中工作。您的实际页面上可能会有其他样式干扰。
是的，我想这就是问题所在。我添加了一个编辑，也许您知道如何解决边框覆盖问题？
对于测试，只需将!important 添加到我为您编写的选择器中定义的样式中。
!important 不起作用。指定类和 id 的分机我已经完成了......仍然没有解决
这是您的代码的 sn-p，实际的 css 不在您问题的上下文中。对于您提供的 sn-p，提供的解决方案有效。我想你必须在你的最后做一些调试才能在你的实际代码上完成它。好消息是您拥有适合您想要定位的元素的正确选择器。