CSS实现：子<a>元素为空时隐藏父<li>元素

CSS的:has()伪类（现代主流浏览器已支持）可以直接实现这个需求，通过它选中包含内容为空的<a>子元素的<li>标签，再设置隐藏样式：

li:has(a:empty) {
  display: none;
}

细节说明 #

• a:empty：精准选中**完全没有内容（包括空格、换行）**的<a>元素
• li:has(a:empty)：匹配包含上述空<a>的父级<li>，通过display: none将其隐藏

兼容空白字符的进阶写法 #

如果你的<a>标签内可能存在空白字符（比如换行、空格），可以结合:blank伪类（部分浏览器支持）来适配：

li:has(a:blank) {
  display: none;
}

内容的提问来源于stack exchange，提问作者JonSnow