無論您的主題多麼令人驚奇，開發人員多麼有才華，或者網站設計有多完美，在某個時候，您都有可能想要更改某些內容。 數量不多，也許只是刪除該側邊欄，或者使該文本框消失即可。 但是在單個頁面上，而不是在所有頁面上。 為此，您需要了解兩個特定的CSS屬性，即可見性和顯示性，這可以幫助您以略有不同的方式完成對特定頁面上某些元素的隱藏。
為什麼要隱藏元素？
網站所有者想要隱藏的更普遍的元素之一是網站標題。 或更具體地說，是標題導航菜單。 也許是博客文章的元數據或評論部分。 問題是，為什麼有人要這樣做？ 為什麼不從網站設計中完全刪除數據？
通常，這是因為一個單一的元素妨礙了，但是將其刪除不值得重寫主題或要剪切的頁面。 也許你的 關於 頁面上有博客文章列表，但是您不希望在那裡發布元數據。 您沒有理由為該實例重寫模板文件。 因此，您可以通過CSS刪除它。
或者，作為另一個示例，您想簡單地在單個帖子或頁面上取消評論部分，而無需使用編輯器。 CSS使您可以完全隱藏或刪除它，而不會影響網站的任何其他部分。 在特定頁面或帖子上使用CSS隱藏元素的一個流行原因是調整字體或標題大小。 在仍然適用博客主題和布局的情況下，可以用幾行代碼完成特定頁面的季節性字體更改以及隱藏的元數據和側邊欄，而無需進行完整的模板調整或重新設計。
但是，無論出於何種原因，您都有許多隱藏元素的選項。
如何找到要隱藏的元素
如果您知道要隱藏哪個元素而不是要調用的元素，則始終可以 右鍵點擊它 並選擇檢查。 這將在瀏覽器中打開「開發工具」窗格，讓您找到其使用的CSS ID或類。
這樣做時，當您將滑鼠懸停在該元素上並單擊右側檢查工具中的正確行時，該元素將突出顯示。
之後，只使用那些選擇器來調整CSS。 請注意，附加到懸停（1）上的元素的選擇器語法就是CSS文件/欄位中的內容。 （2）中的嵌入式選擇器是瀏覽器呈現的內容。
使用顯示CSS
隱藏元素的最簡單方法是將其完全刪除。 display：none屬性就是這樣做的。 它會完全刪除您附加的所有元素。 頁面的那一部分將不再呈現，它將佔據頁面上的空間並重新調整布局。
這可能是刪除頁面上元素的最常用方法。 您可以將其用作網站範圍的刪除，也可以定位單個頁面或帖子類型。
使用可見性CSS
visible：hidden CSS與display：none非常相似。 從理論上講，它們可以用來實現相同的目標。 但是，最大的不同是，使用此控制項，您不會刪除該元素。 有了可見性，您只需使其不可見。 從設計的角度來看，最大的不同是，具有可見性的隱藏元素本身仍將佔據設計中的空間。
如果要刪除頁面上的頁眉，但要保持頁面頂部的間距 DOM，您將使用它。
頁面渲染時，空間仍將存在，但元素將不存在。
何時使用可見性和何時使用顯示
如果在其他元素上使用hide元素CSS，則使用一位的主要原因很簡單。 當使用display：none時，子元素的整個繼承都被隱藏了。 任何具有樣式或嵌套在元素中的東西都將消失。 具有可見性：隱藏，因為元素的空間仍然存在，所以所選元素的所有子元素都保持可見。
例如，如果您想隱藏一行和一列的背景，則可以使用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 {可見性：隱藏； 使用Hide Element CSS進行包裝
無論出於何種原因，了解CSS屬性可見性和顯示方式（以及何時使用它們）的時間和區別都可以幫助您自定義和突出顯示WordPress網站上的不同頁面。 有時，您可能需要圖像以使其根本不出現在頁面上。 或者，博客文章不需要顯示元數據或日期。 無論您要刪除什麼元素，都可以使用hide元素CSS的某些變體來實現目標。
您必須使用CSS隱藏特定WordPress頁面上的元素的原因是什麼？
maryliflower / shutterstock.com的文章特色圖片