Question

我可能会遗漏一些非常明显的内容，但请考虑以下代码（在Edge和Chrome中测试）：

<head>
  <style>
    .table td { display:table-cell; }
    .hide { display: none; }
  </style>
</head>
<body>
  <table class="table">
    <tr>
      <td class="hide">This is supposed to be hidden</td>
    </tr>    
  </table>
</body>

这也是JSFiddle demo。

为什么<td>孩子忽略了display:none？

现在，我知道，例如，移除.table类或内嵌<td style="display:none">将获得所需的结果（隐藏单元格）。

我有兴趣了解这个behivour的逻辑。

Answer 1

为什么孩子忽略了显示：无？

因为.table td更具体，因为.hide。你遇到了一个名为css specifitiy的概念。

看看这里：https://specificity.keegan.st

Answer 2

实际原因是，您无法将display:table-cell;和display: none;添加到同一DOM属性中。在这种情况下，您为同一属性提供两个不同的值，其中CSS赋予display:table-cell;

的重要性

查看此处给出的另一个答案，其中提到了“CSS特异性”。

克服这个问题的两种方法。

一个是为您要应用的样式添加!important标记，这是一种不好的做法。另一个解决方案是添加visibility: hidden，这将隐藏视图中的元素。

Answer 3

这是因为.table td { display:table-cell; }是td最接近的.hide { display: none; }的css选择器，因此您可以通过添加td.hide { display:none; }来解决这个问题

在样式标记中显示表格单元格无

3 个答案: