html - Css 选择所有但第一个 tr 不起作用

Question

这是 fiddle :

https://jsfiddle.net/80mek2sL/1/

我想选择除第一个 tr 之外的所有内容并应用:

border-top: 1px grey solid;

然后我想选择所有第一个 td 但不是第一个 tr 的第一个 td (=忽略第一个 tr) 并应用

border-right: 1px grey dotted;

(我完全不关心与史前网络浏览器的兼容性，我只是希望它能在现在的网络浏览器上运行) 我没有得到的(这就是我实际上迷路的原因)是直接选择器 table > tr 没有选择 tr (否则我会解决我的问题)

Answer 1

您的选择器正在工作。问题是 tr 没有边框。您需要在 td 内应用它...

#cheatsheet tr:not(:first-child) td {
    border-top:1px grey solid;
    background-color: #EF0;
}

Updated Fiddle

#cheatsheet td {
    margin:2px;
    padding:2px
}
#cheatsheet tr td:first-child {
    padding-left:10%;
    width:30%;
}
#cheatsheet thead {
    background-color: #EFE;
}
#cheatsheet h3 {
    text-align: center;
}
table#cheatsheet {
    border:1px black solid;
    margin:2px; padding:2px;
    border-right:1px grey solid;
    width:100%;
}
#cheatsheet tr:not(:first-child) td {
    border-top:1px grey solid;
    background-color: #EF0;
}

<h1>Vim</h1>

<table id="cheatsheet">
    <thead><tr>
        <td colspan="2"><h3>aa</h3></td>
    </tr></thead>
    <tr>
        <td><code class="prettyprint lang-sh">:split</code></td>
        <td style="width:auto">bb</td>
    </tr>
    <tr>
        <td><code class="prettyprint lang-sh">:vsplit</code></td>
        <td style="width:auto">split vertical</td>
    </tr>
</table>

另一方面，table > tr 不起作用的原因是 tr 不是 table 的直接后代呈现的 HTML。如果您使用浏览器元素检查器，您会看到 thead 和 tbody 元素已自动插入

---

编辑 在下面的评论之后，您需要做的就是......

#cheatsheet tbody td {
    border-top:1px grey solid;
    background-color: #EF0;
}

即。仅在 tbody 中定位 td，

Updated Fiddle