Question

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

鉴于此：

<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（或者border：1px solid blue for this demo）？

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

Answer 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>

Answer 2

CSS的一点是你不能根据后代的存在或状态对父/祖先进行更改。反之亦然。

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

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

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

如何在CSS中选择没有后代li的div？

2 个答案: