CSS - 与显示相反：无答案

【问题标题】：CSS - opposite of display:noneCSS - 与显示相反：无
【发布时间】：2014-06-14 06:51:16
【问题描述】：

我正在尝试设置两个简单的 CSS 类来切换元素：

.hide{
  display:none;
}

.show{
  display:inherit;
}

它似乎可以工作，但有时会显示：继承； return Troubles 所以这与 display:none 完全相反； ?

【问题讨论】：

即显示：块；
display 的所有其他可能值将与display:none 相反，例如display:inline-block、display:table、...
@JeyTheva 如果我不想指定它，为什么要阻止？我只需要隐藏和显示而不设置任何规则：P
您不能对之前设置的显示类型做出任何假设。可能是block，可能是inline-block，可能是table-cell 或其他。有一个“无”，但可能有很多“对立面”。
我猜 CSS 不会记住 display 的状态，然后再将其设置为 none。所以不会有任何 CSS 解决方案。

标签： css hide show

【解决方案1】：

这一切都取决于您指定的元素。例如<div>和<p>元素默认为display:block;，而<span>默认为display:inline;。

接受的答案here 根据所使用的浏览器提供了每个元素的默认值列表。

编辑

appearsdisplay: initial; 可以在大多数浏览器中工作，although not IE. CSS 的后备行可能是最佳实践：

.show {
    display: block;
    display: initial;
}

【讨论】：

感谢 +1 实际上是最佳答案，我会再等一会儿，以防万一接受您的 ;)
display:initial 实际上意味着display:inline，所以'display:block' 不能作为它的后备，'Edit' 之后的代码有点误导。还有 display: revert 值（来自 CSS Cascade 级别 4 规范），它有效地将 display 值恢复为元素的浏览器默认值（block 用于 div，table-row 用于 tr 等），但它的浏览器支持甚至比display:initial还要差。

【解决方案2】：

如果您使用 Javascript 来执行此操作：

document.getElementById(id).style.display = "";

和

document.getElementById(id).style.display = "none";

可以为你切换显示。

【讨论】：

【解决方案3】：

如果您只是切换元素，则不需要两个类；您只需要为每个元素添加和删除一个类（“隐藏”）。隐藏元素时，添加类“hide”，再次显示元素时，删除类“hide”。

但是，如果您真的需要两个课程，我已经通过以下方式取得了成功：

.show{display:"";}

空白值告诉浏览器忽略该属性，并返回其默认值。

【讨论】：

【解决方案4】：

对于块元素，这取决于您要显示哪个元素：

.show{
  display: block;
}

【讨论】：