Question

我有以下代码：

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

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

有没有办法在CSS中做到这一点？

Answer 1

没有语法可以从#divid中选择父元素或任何其他非子元素。您可以#divid选择#divid:empty，如果它为空，但您无法通过选择.hideIfDivIsEmpty在任何浏览器中选择{{1}}。根据{{3}}，在CSS4（this question）中有这样的东西，但是现在任何浏览器都不支持它，并且根据相同的规范，选择器太慢而无法在浏览器中实现

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

Answer 2

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

Answer 3

我不认为你可以用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

Answer 4

此问题只能通过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 demo

Answer 5

仅限CSS的版本不具备非常好的浏览器支持。它将涉及在内容之后放置标题标记，然后操纵元素的定位。

这是一个非常黑客攻击的CSS解决方案。 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>

Answer 6

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

Answer 7

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

使用:empty选择器

隐藏空/空值的标签

（两者都需要IE9 +）

<强> HTML

SELECT
    customer.*
FROM
    customer
LEFT JOIN
    customers_widgets
        ON  customers_widgets.customer_id = customer.customer_id
WHERE
    customer_widgets.customer_id IS NULL

<强> CSS

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

Answer 8

我愿意更改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>

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

8 个答案:

CSS

HTML