在样式标签中显示 table 单元格 none

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> child 忽略了 display:none？

现在，我知道，例如，删除 .table class 或 in-lining <td style="display:none"> 会得到我想要的结果（隐藏单元格）。

我有兴趣了解这种行为的逻辑。

Answer 1

这是因为 .table td { display:table-cell; } 比 .hide { display: none; } 更接近 td 选择器 css 所以你可以通过添加 td.hide { display:none; }

来解决这个问题]

Answer 2

Why is the child ignoring the display:none?

因为 .table td 比 .hide 更具体。你运行变成了一个概念叫css specifitiy.

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

Answer 3

真正的原因是，您不能将 display:table-cell; 和 display: none; 都添加到同一个 DOM 属性。在这种情况下，您为相同的属性提供了两个不同的值，其中 CSS 给出了 display:table-cell;

的重要性

查看此处给出的另一个关于 'CSS Specificity' 的答案。

解决这个问题的两种方法。

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

在样式标签中显示 table 单元格 none

display table cell none in style tag

html

css

w3c