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

我希望选择最顶层表格的所有最左边的表格单元格。这是最顶层表格中每个td的第一个tr。

table.main tr td:first-child也会选择内部表格的td，这是我不想要的。我尝试使用table.main>tr>td:first-child，.main>tr>td:first-child和table>tr>td:first-child，但没有一个有效，甚至没有选择顶级表td＆＃39; s

这里的选择器是什么，以及我尝试的选择器出了什么问题？我试图避免为那些td设置课程。

小提琴：http://jsfiddle.net/x70srmae/1/

Answer 1

我尝试使用table.main>tr>td:first-child，.main>tr>td:first-child和table>tr>td:first-child，但没有一个有效，甚至没有选择顶级表td。

这是因为tr 不是表的子项，只有tbody（浏览器在从HTML构建DOM时插入）。

像

这样的东西

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

或将隐式生成的tbody考虑在内的任何类似内容都可以使用 - 请参阅http://jsfiddle.net/x70srmae/2/

（仍在此处引用.main课程，因为否则该选择器将匹配内部td内tr内的第一个tbody > table。）

Answer 2

你快到了！您可以使用.questioncontainer类来指定所需的tr：

table.main .questioncontainer td:first-child

http://jsfiddle.net/kmoe/c8wpsxzs/2/

CSS3使用嵌套表选择顶级表中的所有td

2 个答案: