html - CSS3选择带有嵌套表的顶级表中的所有td

Question

我今天开始使用 CSS3 和 HTML5，使用 Codecademy。

HTML:

<table class="main">
    <tr class="questioncontainer">
        <td class="serialnumber">1.</td>
        <td class="question" colspan="2">What is the question?</td>
    </tr>
    <tr>
        <td></td>
        <td>
            <table class="notmain">
                <tr>
                    <td>
                        <div class="answer">Answer 1</div>
                    </td>
                    <td>
                        <div class="answer">Answer 2</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="answer">Answer 3</div>
                    </td>
                    <td>
                        <div class="answer">Answer 4</div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS:

table.main {
    text-align: center;
    width: 75vw;
    margin-top: 15%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    background-color: #fff3f3;
}

table.main tr td:first-child {
    border-right: thin solid lightgray;
}

我想选择最上面表格的所有最左边的表格单元格。那将是最顶层表格中每个 tr 的第一个 td。

table.main tr td:first-child 也选择内表的 td，这是我不想要的。我尝试使用 table.main>tr>td:first-child、.main>tr>td:first-child 和 table>tr>td:first -child，它们都不起作用，甚至没有选择顶部表的 td。

此处正确的选择器是什么？我试过的选择器有什么问题？我试图避免为那些 td 设置类。

fiddle :http://jsfiddle.net/x70srmae/1/

Answer 1

I tried using table.main>tr>td:first-child, .main>tr>td:first-child and table>tr>td:first-child, none of them worked, didn't even select the top table's td's.

那是因为 tr 不是 表格的子项，而只是 tbody 的子项(浏览器在从您的 HTML 构建 DOM 时插入).

有点像

table.main > tbody > tr > td:first-child { background:red; }

或任何将隐式生成的 tbody 考虑在内的类似内容都将起作用 – 参见 http://jsfiddle.net/x70srmae/2/

(这里仍然引用 .main 类，否则该选择器将匹配 tbody 中 tr 内的第一个 td 内部表的。)