CSS - display:none 的相反属性

Question

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

.hide{
  display:none;
}

.show{
  display:inherit;
}

看起来它可以工作，但有时"display:inherit;"会出现问题，那么它与"display:none;"的确切相反是什么？

- itsme

---

显示：块级； - Jeyarathnem Jeyachanthuru

display 的所有其他可能值都将与 display:none 相反，例如 display:inline-block，display:table，... - King King

@JeyTheva，如果我不想指定块，为什么要使用“block”？我只需要隐藏和显示而不设置任何规则:P - itsme

你不能假设之前设置的显示类型是什么。它可能是“块状”，也可能是“内联块状”，也可能是“表格单元格”或其他类型。有一个“none”，但它可能有许多“对立面”。 - Marc B

我猜CSS不会记住在你将其设置为“none”之前的“display”状态。因此，这个问题没有任何CSS解决方案。 - King King

Answer 1

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

接受的答案here提供了每个元素的默认值列表，基于使用的浏览器。 编辑 看起来display: initial;在大多数浏览器中都有效，但不适用于IE。最好使用CSS的备用行：

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

- Dryden Long

---

谢谢 +1，实际上这是最好的答案，我会再等一会儿，如果没有更好的答案，我就接受你的 ;) - itsme

display:initial 实际上意味着 display:inline，因此 'display:block' 不能作为其回退，并且“编辑”后面的代码有点误导性。还有一个 display: revert 值（来自 CSS 级联级别 4 规范），它有效地将元素的 display 值恢复为浏览器默认值（对于 div 是 block，对于 tr 是 table-row 等），但它的浏览器支持甚至比 display:initial 还要差。 - Ilya Streltsyn

Answer 2

如果您使用JavaScript来实现这个功能：

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

并且

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

可以为您切换显示。

- Saqib Javed

Answer 3

如果您只是切换元素，您不需要两个类；您只需要一个类（"hide"），每个元素都添加和删除该类。隐藏元素时，将其添加到“hide”类中，再次显示元素时，删除“hide”类即可。

但是，如果您确实需要两个类，可以尝试以下方法：

.show{display:"";}

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

- andi

---

我很想看看你的用例，但无论如何，请尝试第二个选项。 - andi

这在我的网站上不起作用，可能是你幸运:P或者我不够幸运:P eheh - itsme

Answer 4

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

.show{
  display: block;
}

- Artem Petrosian