Question

我在尝试使用css3：empty选择器时遇到问题。我的目标是只显示父.showhim div悬停时的子项.showme div的内容。只有当有内容要显示时。（在.showme-wrapper div中）。

然而，下面的小提示显示.showme-wrapper显示，即使它不应该因为它是空的：

如果有人可以帮我隐藏这个.showme-wrapper，当它是空的时候，我会非常感激！

代码：

.showme {
	width: 150px;
	overflow: hidden;
	padding: 0px;
	min-height: 0px;
	max-height: 0px;
	opacity: 0;
	-webkit-transition: all .2s ease-out;
	transition: all .2s ease-out;
}

.showme-wrapper {
	display: block;
	width: 168px;
	height: initial;
	max-height: 150px;
	overflow-y: scroll;
	overflow-x: hidden;
}

	.showme-wrapper:empty {
		display: none;
	}

	.showhim:hover .showme {
		height: auto;
		max-height: 100px;
		opacity: 1;
	}

<div class="dropdown showhim">
	<p class="sidebar-title">I shouldn't show</p>
		<div class="showme">
			<div class="showme-wrapper">
			</div>
		</div>
</div>

<div class="dropdown showhim">
    <p class="sidebar-title">I should show</p>
		<div class="showme">
			<div class="showme-wrapper">
              <p >Content</p>
		    </div>
	    </div>
</div>

Answer 1

来自MDN

：empty伪类表示任何没有子元素的元素。仅考虑元素节点和文本（包括空格）。注释或处理指令不会影响元素是否为空。

<div class="showme-wrapper">和</div>之间有空格。您需要将其删除才能将元素视为:empty。

Answer 2

：empty选择器匹配每个没有子元素的元素（包括文本节点）。只需使用以下小提琴或片段

删除.showme-wrapper div check中的空格

https://jsfiddle.net/jzcm9uen/5/

.showme {
   text-align:center;
   width: 150px;
   overflow: hidden;
   padding: 0px;
   min-height: 0px;
   max-height: 0px;
   opacity: 0;
   -webkit-transition: all .2s ease-out;
   transition: all .2s ease-out;
}

.showme-wrapper {
   display: block;
   width: 168px;
   height: initial;
   max-height: 150px;
   overflow-y: scroll;
   overflow-x: hidden;
}

.showme-wrapper:empty {
   display: none;
}
.showme-wrapper p{
   text-align: center;
}

.showhim {
   text-align: center;
}
.showhim:hover .showme {
   height: auto;
   max-height: 100px;
   opacity: 1;
}

<div class="dropdown showhim">
   <p class="sidebar-title">I shouldn't show</p>
   <div class="showme">
  <div class="showme-wrapper"></div>
   </div>
</div>

<div class="dropdown showhim">
   <p class="sidebar-title">I should show</p>
   <div class="showme">
 <div class="showme-wrapper">
    <p >Content</p>
 </div>
   </div>
</div>

Answer 3

:empty与您直觉认为/应该匹配的内容不匹配。以下是4个例子：

<!-- These AREN'T :empty element: they contain whitespace
     (either carriage return or space but tab is also whitespace -->
<div class="showme-wrapper">
</div>
<div class="showme-wrapper"> </div>

<!-- These are :empty elements -->
<div class="showme-wrapper"></div>
<div class="showme-wrapper"
></div>

Answer 4

虽然您的主要问题已经解决并且您没有使用jQuery，但是如果您想在相同的情况下使用jQuery解决方案，那将会很有帮助。因为使用css无法定位父元素。

$(document).ready(function(){
    $('.showme-wrapper:empty').closest('.showhim').empty();
});

Css3：空选择器与多个类div一起表现奇怪

4 个答案: