CSS选择器选择除第一个tr以外的所有内容无法运行。

Question

这是代码片段：

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

我想选择除第一个标签外的所有内容并应用：

border-top: 1px grey solid;

然后我想选择所有第一个td，但不包括第一个tr的第一个td（即忽略第一个tr），并应用以下操作：

border-right: 1px grey dotted;

我完全不关心与史前网络浏览器的兼容性，我只希望它能在现代网络浏览器上运行。 我不明白的是（这就是我迷失的原因），立即选择器table > tr不选择tr（否则我就会解决我的问题了）。

- Olivier Pons

Answer 1

你的选择器是有效的。问题在于没有边框，你需要将其应用于内...

#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 不起作用的原因是在渲染的 HTML 中 tr 并不是 table 的直接子元素。如果您使用浏览器元素检查器，您会发现自动为您插入了 thead 和 tbody 元素。

---

编辑 根据下面的评论，您只需要执行以下操作...

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

例如：仅针对 tbody 中的 td 进行定位。

更新后的 Fiddle

- Turnip

---

非常感谢，这几乎是我要找的，但第二行顶部也应该有一条灰线。 - Olivier Pons

Answer 2

检查fiddle：https://jsfiddle.net/80mek2sL/6/

nth-child（n + 2）选择器可以帮助选择任意数量的子元素。在下面的示例中，我正在选择第二个子元素之前的行。

#cheatsheet tr:nth-child(n+2) td {
    border-top:1px grey solid;
    background-color: #EF0;
}

您还可以尝试使用(n + *)并检查结果，以更好地理解nth-child选择器

注意：您无法将边框属性放置在<tr>上，因此您需要将其分配给<td>

HTML

<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>
    <tr>
        <td><code class="prettyprint lang-sh">:vsplit</code>
        </td>
        <td style="width:auto">split vertical</td>
    </tr>
    <tr>
        <td><code class="prettyprint lang-sh">:vsplit</code>
        </td>
        <td style="width:auto">split vertical</td>
    </tr>
</table>

CSS

#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:nth-child(n+2) td {
    border-top:1px grey solid;
    background-color: #EF0;
}

- Nilesh Mahajan