如何在 CSS 中选择没有后代 li 的 div？ [复制]答案

【问题标题】：How to select div without descendent li in CSS? [duplicate]如何在 CSS 中选择没有后代 li 的 div？ [复制]
【发布时间】：2016-08-05 10:07:42
【问题描述】：

如果 div 不包含任何 li 后代，我想使用 CSS 来隐藏它。

鉴于此：

<div>
   I should be visible (red)
   <ul>
     <li>one</li>
   </ul>
</div>

<div>
  I should be hidden (blue)
  <ul></ul>
</div>

我可以使用什么 CSS 来选择第二个 div 并应用 display:none（或此演示的边框：1px 纯蓝色）？

这是一个小提琴：https://jsfiddle.net/7yab2z27/

【问题讨论】：

stackoverflow.com/questions/12206935/… 你不能
您只能通过 javaScript 或 jQuery 定位父级。

标签： css

【解决方案1】：

你可以考虑在这种情况下使用 JS，查看我的代码可能会有所帮助。不要忘记包括

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

我在这里找到了你的答案： jQuery to hide a DIV if it has no unordered list items

$(document).ready(function() {

  $('#seconddiv').hide();
  $('#seconddiv').has('ul').show();
});

#seconddiv {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="seconddiv">
  You cant see me I dont have unordered list lol!
  <ul>
    <li></li>
  </ul>
</div>

【讨论】：

【解决方案2】：

CSS 的问题是您不能根据后代的存在或状态来更改父/祖先。反之亦然。

在这种情况下，您可能希望使用 JS 并根据条件应用必要的样式。

假设您使用的是 jQuery，您可以执行以下操作。

var allDivs = $("div");
allDivs.each(function(index,eachDiv){
    if( $(eachDiv).find("li").length === 0 ){
        $(eachDiv).hide();
    }
});

【讨论】：