如何根据top元素是否为空来添加样式

Question

如何根据第一个元素是否为空来更改另一个元素的样式。

<ul></ul>
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>

在上面的代码中，我想给第二个ul {color：red}（更准确地说是后面的ul）的样式，只要第一个ul为空。

是否有纯CSS解决方案？

Answer 1

你可以这样做，但只有当有问题的元素完全为空时 - 是的，甚至不是空格。

http://jsfiddle.net/NicoO/uTJ4N/

ul:empty + ul
{
    color: red;
}

为了更准确，这是身体的第一个空<ul>所需的选择器，以及下面的<ul>：

body > ul:first-of-type:empty + ul
{
    color: red;
}

http://jsfiddle.net/NicoO/uTJ4N/1/

Answer 2

试试这段代码：

ul > li {
   color: red;
}

它选择ul作为子元素li。那些颜色可以是红色的。

Answer 3

http://jsfiddle.net/keypaul/KfaQv/1/

ul:not(:empty) {
    color:red;
}

Answer 4

我不认为纯css解决方案是可行的方法，但您可以使用预处理器，因为它们允许您传递条件语句。