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

Posted 2023-03-06

【中文标题】如何在 CSS 中选择没有后代 li 的 div？ [复制]

【英文标题】：How to select div without descendent li in CSS? [duplicate]

【发布时间】：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/

【问题讨论】：

***.com/questions/12206935/… 你不能

您只能通过 javascript 或 jQuery 定位父级。

【参考方案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();
    
);