Question

我有三个清单：

<ul class="mighty-list" id="list1">
  <li>Cool</li>
  <li>Yah</li>
</ul>

<ul class="mighty-list" id="list2">
  <div id="floating_button"></div>
</ul>

<ul class="mighty-list" id="list3">
</ul>

现在我想写一个方法来选择list2 + list3（或仅选择列表1），考虑到它们没有任何<li>个孩子？

我知道:empty解决方案都没有，因为list3包含空格，所以我需要一个不同的解决方案来选择仅<li>的列表

Answer 1

有一种方法可以使用jQuery。

您检测到页面上的任何<li>并向父级添加一个类。然后你可以在CSS中为那个类做你想做的事。

$('li').parent().toggleClass('has-li', true);

.has-li {
  /* your code here */
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mighty-list" id="list1">
  <li>Cool</li>
  <li>Yah</li>
</ul>

<ul class="mighty-list" id="list2">
  <div id="floating_button"></div>
</ul>

<ul class="mighty-list" id="list3">
</ul>

CSS Selector用于空列表，不考虑空格或div

1 个答案: