CSS 中唯一具有文本兄弟的孩子答案

【问题标题】：Only child in CSS with a text siblingCSS 中唯一具有文本兄弟的孩子
【发布时间】：2015-10-26 18:23:10
【问题描述】：

如果是独生子女，我想让以下内部跨度消失：

<div class="foo">
  <span></span>  
</div>

即在这种情况下，选择器不应该工作：

<div class="foo">
  <span></span>  
  Some text
</div>

我尝试了 :only-child 和 :last-child 都不起作用，我认为是因为“某些文本”文本。

【问题讨论】：

你的问题不够清楚。您是否在问如何使用“foo”类隐藏 div 中的所有元素？如果这就是您的意思，为什么不使用： div.foo:empty { display: none } 并在为空时隐藏整个内容？
@Ionut 是的，还不够清楚，我更新了。
你试过 .foo span:empty:first-child 吗？此外，在您的代码中，跨度始终是唯一的孩子。 'Some text' 文本不是子项。
我认为这不能只用 CSS 来完成。您应该使用 jQuery 或 JavaScript。
纯 CSS 解决方案需要在 Some text 周围有一个额外的元素，并且在这个额外元素之后存在现有跨度（然后使用 flexbox 或 float 或其他重新排序）。然后你可以选择后者，无论它是否出现在额外元素之后，例如是不是第一个孩子

【解决方案1】：

我认为这不能仅使用 CSS 来完成。您应该通过设置一些条件来使用 jQuery 或 JavaScript。

if ($(".foo").text().length < 1 && $('.foo span').is(':empty')) {
    //hide your element here
    $('.foo').hide();
}

【讨论】：