今天在寫一個主題時,需要把一些沒有內容的元素給隱藏掉,由于是由后臺動態生成的頁面,不知道沒有內容的元素在哪。當然這種問題對于技太大姥來說,是簡單的一筆,但對于像我這種菜鳥來說,就很難了。所以就想出了,用CSS來隱藏一些空內容元素的方法。

CSS :empty 選擇器介紹

css 選擇內容為空的元素,需要用到 CSS 的 :empty 選擇器!

:empty:此選擇器可以匹配沒有子元素或文本內容的每個元素。

語法:

event:empty{
}

CSS 選擇內容為空的元素的教程

例1:使用 css 選擇器 empty 隱藏內容為元素的教程

html代碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div p{
        height: 40px;
        color:red;
    }
    /*隱藏沒有內容的元素*/
    div p:empty{
        display: none;
    }
</style>
<body>
<div>
    <p>飛鳥慕魚博客</p>
    <p>我是有內容的</p>
    <p></p>
    <p>我是有內容的</p>
</div>
</body>
</html>

例2:利用 CSS 的 empty 選擇器,修改內容為空元素的背景色

css代碼:

<style>
    div p{
        height: 40px;
        color:red;
    }
    /*修改沒有內容的元素的背景色*/
    div p:empty{
        background-color: blue;
    }
</style>