特定表行的CSS

Question

我有这样一张桌子:

<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或class标签来指定要设置样式的行,我正在寻找一些针对特定行的解决方案.

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

Answer 1

这是解决方案.

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()不适用于旧浏览器,因此这里是解决方案.

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

希望现在有所帮助.