Css3：空选择器与多个类div的行为奇怪

我有问题试图使用css3：空选择器。我的目标是只显示父级.showhim div悬停时显示子.showme div的内容。只有当有内容要展示时。（在.showme-wrapper div内）。Css3：空选择器与多个类div的行为奇怪

但是下面的小提琴显示.showme，包装显示，即使它不应该，因为它空：

如果任何人能帮助我隐藏此.showme，包装时，它是空的，我会很感激！

代码：

.showme { 
 
\t width: 150px; 
 
\t overflow: hidden; 
 
\t padding: 0px; 
 
\t min-height: 0px; 
 
\t max-height: 0px; 
 
\t opacity: 0; 
 
\t -webkit-transition: all .2s ease-out; 
 
\t transition: all .2s ease-out; 
 
} 
 

 
.showme-wrapper { 
 
\t display: block; 
 
\t width: 168px; 
 
\t height: initial; 
 
\t max-height: 150px; 
 
\t overflow-y: scroll; 
 
\t overflow-x: hidden; 
 
} 
 

 
\t .showme-wrapper:empty { 
 
\t \t display: none; 
 
\t } 
 

 
\t .showhim:hover .showme { 
 
\t \t height: auto; 
 
\t \t max-height: 100px; 
 
\t \t opacity: 1; 
 
\t }

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

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

来源

2017-08-16 JoeScott1232

从MDN

的：空伪类代表有没有孩子在所有的元素。仅考虑元素节点和文本（，包括空格）。注释或处理指令不影响元素是否被视为空。

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

来源

2017-08-16 09:12:27 Quentin

谢谢！这完全被忽视了。 – JoeScott1232

：空选择器匹配没有子元素（包括文本节点）的每个元素。只是删除下面捣鼓的.showme-wrapper股利支票的空间或摘录

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>

来源

2017-08-16 09:12:43

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

来源

2017-08-16 09:14:26 FelipeAls

谢谢:)。我甚至没有想到会考虑空白空间。 – JoeScott1232

虽然你的主要问题已经解决了，你是不是有问题使用jQuery，但如果你想使用jQuery在相同的情况下的解决方案，这将是有益的。因为父元素不能通过使用CSS来定位。

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

来源

2017-08-16 09:25:22

谢谢，我会在未来的发展中牢记这一点。 – JoeScott1232

Css3：空选择器与多个类div的行为奇怪

回答

相关问题