无论您的主题多么令人惊叹，您的开发人员多么有才华，或者您的网站设计多么完美，总有一天，您可能想要改变一些东西。不是很多，也许只是删除那个侧边栏，或者让那个文本框消失。但是在单个页面上，而不是在所有页面上。为此，您需要了解两个特定的 CSS 属性，visibility 和 displayability，它们可以帮助您以稍微不同的方式隐藏特定页面上的某些元素。
为什么要隐藏元素？
网站所有者最想隐藏的元素之一是网站标题。或者更具体地说，标题导航菜单。也许是博客文章的元数据或评论部分。问题是，为什么会有人想要这样做？为什么不从网站设计中完全删除数据？
通常，这是因为单个元素挡住了路，但删除它并不值得重写主题或裁剪页面。也许您的关于页面上有一个博客文章列表，但您不想在那里发布元数据。您没有理由为此实例重写模板文件。所以你可以通过 CSS 删除它。
或者，作为另一个示例，您只想在不使用编辑器的情况下删除单个帖子或页面上的评论部分。 CSS 允许您完全隐藏或删除它而不影响您网站的任何其他部分。使用 CSS 隐藏特定页面或帖子上的元素的一个普遍原因是调整字体或标题大小。页面特定的季节性字体更改，以及隐藏的元数据和侧边栏，可以通过几行代码完成，无需完整的模板调整或重新设计，同时仍然应用博客主题和布局。
但是，无论出于何种原因，您都有许多隐藏元素的选项。
如何找到要隐藏的元素
如果您知道要隐藏哪个元素而不是调用什么，您可以随时右键单击它并选择检查。这将在浏览器中打开 Dev Tools 窗格，允许您找到它使用的 CSS ID 或类。
做这个的时候，当当您将鼠标悬停在元素上并单击右侧检查工具中的正确行时，该元素将突出显示。
之后，只用那些调整CSS的选择器。请注意，悬停时附加到元素的选择器语法 (1) 是 CSS 文件/字段中的内容。 (2) 中的嵌入式选择器是浏览器呈现的内容。
使用 reveal CSS
隐藏元素的最简单方法是将其完全删除。 display:none 属性就是这样做的。它会完全删除您附加的任何元素。那部分页面将不再渲染，它会占用页面空间并重新调整布局。
这可能是删帖page 上层元素最常用的方法。您可以将其用作站点范围的删除，或针对单个页面或帖子类型。
使用visibility CSS
visible: hidden CSS与display: none非常相似。理论上，它们可以用来实现相同的目标。然而，最大的区别在于使用此控件，您不会删除元素。有了可见性，你就可以让它不可见。从设计的角度来看，最大的不同是具有可见性的隐藏元素仍然会占据设计本身的空间。
如果您想删除页面上的页眉但要在页面顶部保留间距 DOM，则可以使用此方法。
页面渲染时，空间仍然存在，但元素将不存在。
何时使用可见性和何时使用显示
如果您在其他元素之上使用隐藏元素 CSS，则使用一位的主要原因很简单。使用 display: none 时，子元素的整个继承被隐藏。任何具有样式或嵌套在元素中的东西都会消失。使用 Visibility: Hidden 时，所选元素的所有子元素都保持可见，因为元素的空间仍然存在。
例如，如果要隐藏某行某列的背景，可以使用visible:hidden来保持其他元素的格式和渲染，只移除指定的元素。在这种情况下，使用 display:none 不会删除整行或整列，重新组织页面内容。
如何在WordPress中隐藏特定页面上的元素
当使用以下两种方法之一在WordPress中隐藏特定页面上的元素时，您很可能需要找到该页面隐藏元素的特定页面的 ID 类。请记住，这只是页面 ID 号，而不是 CSS ID。事实上，它是一个 CSS 类选择器：例如 .page-id-1337。
您可以在编辑页面的 URL 中找到页面或帖子 ID。最快的方法是将鼠标悬停在链接上并查看预览 URL。
也可以找在任何编辑或预览页面的 URL 栏中添加此 ID。这些 URL 中列出的数字是您将在 CSS 选择器中使用的页面 ID，用于定位特定页面上的元素，而不是网站上其他任何地方的元素。
.page-id-55341 header#main-header{display:none;}
上面的代码只会删除具有该特定 id 的页面上的页眉。以下 CSS 将从每个页面中删除它并将其发布在网站上的适当位置。
header#main-header { 可见性：隐藏；用隐藏元素 CSS 包裹
无论出于何种原因，了解 CSS 属性可见性以及如何（以及何时使用它们的时间和区别）可以帮助您自定义和突出显示 WordPress 网站上的不同页面。有时，您可能需要一张图片，这样它就不会出现在页面上。或者，博客文章不需要显示元数据或日期。无论您想删除什么元素，您都可以使用隐藏元素 CSS 的一些变体来实现您的目标。
您必须使用 CSS 来隐藏特定 WordPress 页面上的元素的原因是什么？
Maryliflower/Shutterstock.com 文章特色图片
来源
