google-chrome - 为什么 Chrome 开发者工具的计算样式显示的内容与样式选项卡不同？

Question

我的 css 中有一个包含 display:none 的类。当我将它应用到 div 时，Chrome 开发人员工具的“样式”选项卡显示 display:none，但是，div 正在显示。当我转到“计算”选项卡时，它会显示我的 div 的 display:block。

如果我返回“样式”选项卡，取消选中“显示:无”，然后重新选中它，div 就会消失。这似乎是 Chrome 中的一个错误，但我不确定。

我应该提到，它不是变灰或变浅的文本，也没有删除线。

此外，该类是基于 GWT 中的单击事件添加到一个 div 并从另一个 div 中删除的。

我尝试将 !important 添加到我的 css 中，但得到了相同的结果。

有什么想法吗？

以下是 Chrome 开发者工具的一些屏幕截图:

Answer 1

这可能与特异性有关。例如，如果您将类的范围限定在样式表中的其他位置，那么它将比“裸”类具有更高的特异性。

.scope .myclass {
  display: block;
}

.myclass {
  display: none;
}

// .myclass will be displayed
<div class="scope">
  <div class="myclass">...</div>
</div>

// .myclass will not be displayed
<div class="myclass">...</div>

如果 .myclass div 位于 .scope 之外，它将显示:none。但是，如果它位于 .scope 内，则每次都会显示:block，因为存在更高的特异性。有一篇关于 CSS 特异性技巧的精彩文章:http://css-tricks.com/specifics-on-css-specificity/