Css 如果下一个元素为空，则隐藏该元素

我有以下代码：

<h3 class="hideIfDivEmpty">title</h3>
<div id="divId"></div>

我想在div为空时隐藏h3元素。 我愿意更改html结构，但h3必须在div之外，因为它的内容是动态更改的

---

在CSS中有这样做的方法吗？

我认为你不能用CSS来做

改用jQuery：

var divs = $(".hideIfDivEmpty");

divs.each(function () {
    var div = $(this);

    if (div.next().html() === "") {
        div.hide();
    }
});

就像@Prinzhorn正确地说的：有一个线性解决方案：

$('h3.hideIfDivEmpty + div:empty').prev().hide();

---

等等，你会得到一些很好的答案。但我的解决方案是创建一个css类，然后将其分配给h3和div标记，然后使用jquery选择器使用css类获取这两个标记。现在，如果索引1中的元素innertext=null或为空，那么索引0中的元素应该隐藏，那么您将获得一系列标记。我希望这会有所帮助

这个问题只能通过JavaScript或它的一个库在客户端解决。对于纯JavaScript，我建议：

function hideIfNextEmpty(el) {
    var text = 'textContent' in document ? 'textContent' : 'innerText';
    if (el.nextElementSibling[text].replace(/\s/g,'').length === 0) {
        el.style.display = 'none';
    }
}

hideIfNextEmpty(document.querySelector('h3.hideIfDivEmpty'));

---

.

没有语法从divid中选择父元素或任何其他非子元素。如果divid为空，可以按divid:empty选择divid，但无法通过选择该选项在任何浏览器中选择.hideIfDivIsEmpty。据介绍，CSS4中有这样一个功能，但目前任何浏览器都不支持它，而且根据相同的规范，选择器速度太慢，无法在浏览器中实现

---

有关此问题的javascript解决方案，请参阅其他答案。

仅CSS版本的浏览器支持不太好。这将涉及将标题标记放在内容之后，然后操纵元素的位置

这里有一个非常复杂的CSS解决方案。IE 9+。您应该像其他人建议的那样，使用JavaScript来实现这一点

CSS HTML 如何输入文件的内容？因为非JS解决方案只需要输入类，例如隐藏类。如果您在HTML中手动输入内容，那么您可以自己添加这些类。如果您是通过模板动态加载内容，那么您应该能够编写一些简单的逻辑，根据要输入的内容将类应用于元素。

使用css选择器添加标签

使用选择器隐藏空/空值的标签

两者都需要IE9+

HTML

我愿意改变html结构

对于这种结构灵活性，答案是肯定的。将DIV置于H3元素之前，并添加以下CSS规则：

//仅用于测试目的|参见css和新的html结构 document.querySelector'button'。addEventListener'click'，函数{ var el=document.querySelector'divId'； ifel.textContent.length>0{ el.textContent=； }否则{ el.textContent=你好，世界！； } }; divid:empty+h3.hideIfDivEmpty{ 显示：无； } 你好，世界！ 标题

---

切换文本否。CSS无法选择元素的前一个同级。完全尽管有很多人声称CSS 4会允许它，尽管有明确的相反声明，参考：。您可能想解释为什么要使用jQuery，而标记是and。一行：$'h3.hideIfDivEmpty+div:empty'。prev.hide@Prinzhorn除了首先修剪空白[trim]之外，您如何做同样的事情？@Michaeeger untested:$'h3.hideIfDivEmpty+div:empty'.filterfunction{return$this.text.trim===}.prev.hide@不幸的是，普林霍恩没有成功。然而，看起来一行代码正变得和标准版本一样长，就像钉上一样容易。修剪。它确实被黑客攻击了。我想知道为什么会有一个选择下一个兄弟姐妹，而不是以前的想法是的，这就是我最终要做的。我只是想知道是否有一个只使用css的解决方案，不涉及额外的javascript或服务器端处理；明确地是的，选择器API具有*/*可能具有主题伪类；但它不会像当前在浏览器CSS中编写的那样可用。谢谢。我修改了答案以反映这一点。但我不得不反复读了半打。

article p:empty + header {
    display: none;
}

article p:empty {
    margin: 0;
}

article p {
    float:left;
}

article header {
    position: absolute;
    top: 0;
}
article header h1 {
    margin: 0;
}

article > p:first-of-type:not(:empty) {
    padding-top: 1em;
}

article {
    position: relative;
}

/* include clearfix */

<article class="clearfix">
    <p></p>
    <header><h1>Hidden article</h1></header>
</article>

<article class="clearfix">
    <p>Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
    <header><h1>Porta Malesuada</h1></header>
</article>

<div class="label l_colour"></div>
<div class="label l_size"></div>
<div class="label l_shape"></div>

/* HIDE IF EMPTY*/
.att_label:empty { display: none; }

/* LABEL STYLES */
.att_label::before { font-weight:bold; }

/* LABEL VALUES */
.att_colour::before { content:"Colour: "; } 
.att_size::before { content: "Size: "; }
.att_pattern::before { content: "Pattern: "; }