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

Question

我有以下代码：

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

我希望在div为空时隐藏h3元素。 我愿意更改html结构，但是h3必须位于div外部，因为其内容是动态更改的。

有没有办法在CSS中实现这一点？

- MaD

---

没有办法使用CSS选择元素的前一个兄弟。尽管有很多人声称CSS 4将允许这样做（尽管有明确的声明相反，参考：http://dev.w3.org/csswg/selectors4/#profiles）。 - David Thomas

Answer 1

没有语法可以选择父元素或任何非子元素来自于#divid。如果#divid是空的，您可以通过#divid:empty选择它，但是在任何浏览器中都无法选择.hideIfDivIsEmpty。根据此问题，CSS4（规范）中有这样的东西，但目前没有任何浏览器支持它，并且根据相同的规范，选择器太慢了，不能在浏览器中实现。

请查看其他答案以获取解决此问题的javascript方案。

- Sumurai8

---

请阅读您链接的规范，特别是2.1.快速与完整的选择器配置文件。是的，选择器API可能有一个subject伪类;但是(当前写法)它不会在浏览器CSS中可用。 - David Thomas

谢谢。我已经修改了答案以反映这一点。不过，我不得不读了半打次才明白。 - Sumurai8

Answer 2

我认为你不能用CSS做到这一点。

改用jQuery：

var divs = $(".hideIfDivEmpty");

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

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

JSFIDDLE

就像@Prinzhorn所说的那样：有一种线性解决方案：

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

JSFIDDLE

{{链接1：JSFIDDLE}}

- Ionică Bizău

---

你可能需要解释为什么在标签是 [tag:css] 和 [tag:css3] 的情况下使用 jQuery。 - David Thomas

一行代码：$('h3.hideIfDivEmpty + div:empty').prev().hide(); - Prinzhorn

@Prinzhorn，如果要先去除任何空格[trim()]，你会怎么做？ - Michael Yaeger

@MichaelYaeger 未经测试：$('h3.hideIfDivEmpty + div:empty').filter(function() { return $(this).text().trim() === '' }).prev().hide(); - Prinzhorn

@Prinzhorn很遗憾那个方法没有起作用。不过，似乎这个一行代码的版本变得和标准版本一样长了，只需要加上.trim()就可以了。 - Michael Yaeger

Answer 3

好的，等一下你会得到一些非常好的答案。但我的解决方案是创建一个CSS类，然后将其分配给h3和div标记，然后使用jQuery选择器使用CSS类获取它们两个。现在，如果索引为1的元素的innertext = null或为空，则索引为0的元素应该隐藏。我希望这能帮助你。

- khalid khan

Answer 4

使用::before CSS选择器添加标签。

使用:empty选择器隐藏空/Null值的标签。

（两者都需要IE9+）

HTML

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

CSS

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

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

/* LABEL VALUES */
.l_colour::before { content:"Colour: "; } 
.l_size::before { content: "Size: "; }
.l_shape::before { content: "Shape: "; }

- Gigilamesh

---

这个技术是有效的，但会对HTML做出显著的改动。 - Paul Sturm

Answer 5

这个问题只能通过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'));

JS Fiddle演示。

- David Thomas

Answer 6

仅使用CSS的版本将不会得到很好的浏览器支持。这将涉及在内容后放置标题标签，然后操纵元素的位置。

这是一个非常混乱的CSS-only解决方案。IE 9+。正如其他人建议的那样，您应该使用JavaScript来完成此操作。

http://jsfiddle.net/znLMe/

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 */

HTML

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

- thgaskell

---

确实被黑了。我想知道为什么有一个下一个兄弟选择器，而没有上一个选择器。 - MaD

Answer 7

我愿意改变HTML结构...

有了这种灵活性的结构，答案是肯定的。让DIV在H3元素之前，并添加以下CSS规则：

// testing purposes only | see css and new html structure 
document.querySelector('button').addEventListener('click', function() {
  var el = document.querySelector('#divId');
  if(el.textContent.length > 0) {
    el.textContent = "";
  } else {
    el.textContent = "Hello world!";
  }
});

div#divId:empty + h3.hideIfDivEmpty {
  display: none;
}

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

<!-- Button adds and removes text within div -->
<button>Toggle Text</button>

- Sterling Beason

Answer 8

<div> 的内容如何输入？因为非 JS 解决方案只需输入类（例如 "is-hidden"）。如果您在 HTML 中手动输入内容，则可以自己添加类。如果通过模板动态加载内容，则应该能够编写一些简单的逻辑，根据要输入到 <div> 中的内容，在 <h3> 元素上应用一个类。

- davidtheclark

---

是的，那最终是我要做的。我只是想知道是否有一种仅涉及CSS而不需要额外JavaScript或服务器端处理的解决方案。 - MaD