Question

这是小提琴：

我想选择除第一个tr以外的所有内容并申请：

border-top: 1px grey solid;

然后我要选择所有第一个td但不是第一个td的第一个tr（=忽略第一个tr）并应用< / p>

border-right: 1px grey dotted;

（我完全不关心与史前Web浏览器的兼容性，我只是希望它能够在当今的Web浏览器上运行）我没有得到的（这就是我实际失去的原因）是直接选择器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不是呈现HTML中table的直接后代。如果您使用浏览器元素检查器，您将看到自动为您插入thead和tbody个元素

EDIT 在下面的评论之后你需要做的就是这个......

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

即。仅定位td内的tbody，

Updated Fiddle

Answer 2

检查小提琴：https://jsfiddle.net/80mek2sL/6/

nth-child(n+2)选择器有助于选择任意数量的孩子。在下面的例子中，我从第二个孩子前面选择一行。

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

您还可以播放aorund (n + *)并检查结果，以便更好地了解nth-child选择器

注意：您不能将border属性设置为<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;
}

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

2 个答案: