CSS-使用类隐藏第一个<tr>

Question

我需要隐藏第一行tr.snip

为什么这个CSS不起作用？

.table tr.snip:first-child {
    display:none!important;

}

html

 <table>
    <tbody>
    <tr>...</tr>
    <tr class="snip">...</tr>
    <tr class="snip">...</tr>
    </tbody>
  </table>

Answer 1

因为您尝试选择的是{strong> ALSO 其父级tr.snip的{​​{1}}。您要隐藏的first child是其父级的第二个子级，因此与tr.snip选择器不匹配。

此外，不要忘记将您的内容放入CSS中，就像这样：

td

Answer 2

说.snip:first-child时，您正在寻找既具有snip类又是其父级的第一个孩子的事物。在您的表中，具有snip类的第一行是第三个孩子，因此选择器不起作用。

在选择器级别4出现之前，无法以您尝试的方式直接选择事物，因此，目前最好的选择是尝试合并同级选择器（+和{{1} }）和伪选择器。您究竟要做什么，取决于用例的复杂程度。

您的示例最简单的解决方案是：

~

如有必要，您还可以尝试以下操作：

tr + tr.snip {
  display: none;
}

或者您可以反过来做：

tr:not(.snip) + tr.snip {
  display: none;
}

或者（如果更合适的话）：

tr.snip {
  display: none;
}
tr.snip + tr.snip {
  display: table-cell;
}