如何隐藏包含无<li>元素的<ul>的.statistics-section？

你当前的CSS选择器逻辑有误，导致无法正确隐藏目标元素：

• 原选择器.statistics-section:has(ul:has(:not(li)))的作用是匹配**包含了带有非
• 子元素的
  的容器，但你需要的是匹配包含没有任何
  • 子元素的
    **的容器。

    正确的CSS代码 #

    .statistics-section {
      border: 2px solid red;
    }
    
    /* 隐藏包含空<ul>（无<li>子元素）的.statistics-section */
    .statistics-section:has(ul:not(:has(li))) {
      display: none;
    }
    

    逻辑说明 #

    • ul:not(:has(li))：精准选中所有没有任何<li>子元素的空<ul>
    • 外层.statistics-section:has(...)：匹配包含上述空<ul>的容器，通过display: none将其隐藏

    注意：:has()选择器需要现代浏览器支持（Chrome/Edge 101+、Firefox 121+、Safari 15.4+），若需兼容旧版浏览器，可通过JavaScript辅助实现相同逻辑。

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