CSS - opposite of display:none

Question

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

.hide{
  display:none;
}
.show{
  display:inherit;
}

它似乎有效，但有时会显示：继承；返回故障，那么哪一个与显示完全相反：无？

Answer 1

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

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

编辑

display: initial;似乎可以在大多数浏览器中工作，尽管不是IE。CSS的后备行可能是最佳实践：

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

Answer 2

如果您使用Javascript来实现这一点：

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

和

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

可以为您切换显示。

Answer 3

如果只是切换元素，则不需要两个类；您只需要为每个元素添加和删除一个类（"hide"）。当您隐藏元素时，您会将类"hide"添加到其中，当您再次显示元素时，则会删除类"hid"。

然而，如果你真的需要两个课程，我已经成功地完成了这样的事情：

.show{display:"";}

空值告诉浏览器忽略该属性，然后返回到默认值。

Answer 4

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

.show{
  display: block;
}