Question

我需要制作一个包含文字的DIV，但CSS没有隐藏任何子元素，有没有办法做到这一点？

如果这是html使节点可见

<div class="pages_available_text" style="">
                        1
    <a href="javascript: void(0);" onclick="Add_Search_Param('page', 2); return Refine();">2</a>

    <a href="javascript: void(0);" onclick="Add_Search_Param('page', 3); return Refine();">3</a>

</div>

但如果这是HTML

<div class="pages_available_text">
                        1
</div>

它应该隐藏div（：空不会工作，因为div包含文本）

Answer 1

一种解决方法（但不会删除div已用空间，只是使文本不可见），用span包装文本（因为无法使用css选择TextNode），然后隐藏它使用:only-child选择器：

<style>
  .pages_available_text > :only-child {
    display:none;
  }
</style>

<div class="pages_available_text">
  <span class='num'>1</span>
  <a href="javascript: void(0);" onclick="Add_Search_Param('page', 2); return Refine();">2</a>
  <a href="javascript: void(0);" onclick="Add_Search_Param('page', 3); return Refine();">3</a>
</div>

<div class="pages_available_text">
  <span class='num'>1</span>
</div><!-- the span won't show -->

Answer 2

我认为JS代码段是您最好的选择，例如：

if (!$('.pages_available_text').child().length) {$('.pages_available_text').hide();}

CSS选择没有元素的div

2 个答案: