今天在写一个主题时,需要把一些没有内容的元素给隐藏掉,由于是由后台动态生成的页面,不知道没有内容的元素在哪。当然这种问题对于技太大姥来说,是简单的一笔,但对于像我这种菜鸟来说,就很难了。所以就想出了,用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>