特定表格行的 CSS答案

【问题标题】：CSS of specific table row特定表格行的 CSS
【发布时间】：2017-07-30 05:14:19
【问题描述】：

我有一张这样的桌子：

<table id="someID">
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
</table>

我想仅使用 CSS 隐藏表格中的第二行和第三行。此表是预定义的，因此我无法使用 id 或类标签来指定要设置样式的行，我正在寻找一些针对特定行的解决方案。

如果这可以用 CSS 完成，有人可以告诉我如何做到这一点。

【问题讨论】：

标签： css html-table css-tables tablerow

【解决方案1】：

这里是Solution.

HTML：

<table id="someID">
    <tr><td>example text</td></tr>
    <tr><td>example text</td><td>example text</td></tr>
    <tr><td>example text</td></tr>
    <tr><td>example text</td><td>example text</td></tr>
</table>

CSS：

table tr:nth-child(2) {display : none;}
table tr:nth-child(3) {display : none;}

您必须使用 :nth-child() 来隐藏您想要的行。

由于大多数 :nth-child() 不适用于旧版浏览器，这里是他们的Solution。

HTML：

<table id="someID">
    <tr><td>example text</td></tr>
    <tr><td>example text</td><td>example text</td></tr>
    <tr><td>example text</td></tr>
    <tr><td>example text</td><td>example text</td></tr>
</table>

CSS：

table tr:FIRST-CHILD + tr {
    display:none;
}

table tr:FIRST-CHILD + tr + tr {
    display:none;
}

希望这对现在有所帮助。

【讨论】：

【解决方案2】：

你可以使用:nth-child()选择器：

http://www.w3schools.com/cssref/sel_nth-child.asp

【讨论】：

【解决方案3】：

您可以使用 CSS3 来实现 CSS

#someID tr:nth-child(2){display:none;}
#someID tr:nth-child(3){display:none;}

【讨论】：