如果容器为空，如何移动div容器

Question

我的问题是，如果另一个容器为空，我不知道如何移动div容器。我的结构如下：

HTML：

<div id="wrapper">
    <div id="child1">
        Some content....
    </div>
    <div id="child2"></div>
</div>

CSS：

#wrapper
    {
    /* nop */
    }

#child1
    {
    transform: translate(0, -3950px);
    }

#child2:empty #child1
    {
    transform: translate(0, -4100px);
    }

我知道我的＃child1不在＃child2内，但是如果＃child2为空，如何选择＃child1？有特殊的CSS技巧吗？

Answer 1

有趣的东西。

您可以使用adjacent sibling selector和:empty伪类，例如：

#child2:empty ~ #child1 {
  background-color: red;
}

确保您还反转了div的顺序，请在此处查看工作的jsfiddle：

https://jsfiddle.net/z0uve835/1/