CSS 隐藏无内容的 li标签（：empty的作用）

最新推荐文章于 2022-08-10 15:32:47 发布

逆风优雅

最新推荐文章于 2022-08-10 15:32:47 发布

阅读量441

点赞数

分类专栏： CSS 文章标签： elementui css webview

本文链接：https://blog.csdn.net/qq_44603011/article/details/122368835

版权

CSS 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

此博客展示了如何使用CSS对HTML列表项进行样式设置，特别是针对空元素的特殊情况。通过示例代码，可以看到当`<li>`标签为空时，其背景颜色会变为黑色，而正常情况下则显示蓝色紫罗兰色边框。这是一个关于前端开发中CSS选择器应用的实例。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    li{
        border:2px double #ddd;
        color: blueviolet;
    }
    li:empty{ /*表示当li的元素中没有内容时 的样式变化*/
        /* display: none; */
        background-color: #000;
    }
</style>
<body>
    <div>
        <ul>
            <li>嘻嘻嘻嘻</li>
            <li>s</li>
            <li></li>
        </ul>
    </div>
    
</body>
</html>

效果如下：