通过 CSS 折叠 div 和 p答案

【问题标题】：To collapse div and p by CSS通过 CSS 折叠 div 和 p
【发布时间】：2010-11-21 04:47:34
【问题描述】：

如果 div 和 p 元素被 CSS 为空，如何将它们折叠起来，这样标签就不会在源代码中为用户显示？

这些元素在我的源代码中，尽管它们是空的。这会导致网站的其他部分出现错误。

我运行失败

div.unsuccessful,
div.unsuccessful p {
    visibility: collapse;                                                                                                                                                                                      
}

这表明你显然不能通过 CSS 做这样的事情。也许，需要其他工具，例如 PHP。

【问题讨论】：

标签： css html visibility collapse

【解决方案1】：

CSS 对实际的 HTML 代码没有影响，因此无法做到这一点。在（即将推出的）CSS3 中，您可以使用 :empty 伪类阻止它们被渲染：

div:empty {
    display: none;
}

这当然不是一回事，但它可能会解决您遇到的问题.. 如果只有浏览器实际支持它，但他们还不支持它。

最好的选择是在服务器上删除它们，使用像 PHP 这样的脚本语言。我想您可以使用 JavaScript 在客户端执行此操作，但这是一个糟糕的解决方案，imo。

话虽如此，您对这些空标签有什么问题？为什么他们首先在那里？在我看来，一些重新设计是为了防止产生不必要的标签。

另外，要小心。空标签并不总是毫无意义。事实上，删除所有空的<div> 可能被认为是有害的。

【讨论】：

【解决方案2】：

是的，如果你想阻止它们出现在源代码中，你需要在你的服务器代码中做出适当的考虑。或者，您也可以在 JavaScript 中设置 HTML，但这可能不是解决此问题的推荐方法。不过，您可能还想多说一点，关于您正在尝试做的事情。

【讨论】：

【解决方案3】：

Visibility 属性用于设置是否显示对象的内容。它不会从 DOM 中移除元素。

折叠 Windows Internet 的新功能资源管理器 8

在表格中用于删除行和列；对于所有其他元素，与隐藏相同。

还有你为什么要这样做？

【讨论】：

【解决方案4】：

div { display: none; }

从页面中完全删除一个元素。

它仍然会显示在您的源代码中，无论您使用 CSS 做什么。浏览器将 HTML 源代码和 CSS 指令组合成一个可显示的页面，原始源代码没有被修改。 CSS 只能影响元素的视觉显示，不能改变元素。要真正从 DOM 中删除元素，您需要 Javascript（或者首先不将元素放在那里）。

【讨论】：

【解决方案5】：

是的，您必须使用服务器端处理向用户显示或不显示某些代码：

if ($showAdminLink) {
    echo "<p><a href=\"admin.php\">Admin panel</a></p>";
}

无论您尝试什么技巧，在客户端完成的任何事情（HTML、Javascript、CSS）都可以更改和使用。

【讨论】：