使用CSS，如何在元素B上获得伪类“空”以影响元素A的样式？

Question

我有两个非常简单的文本字段，我想根据第二个元素的'empty'伪类来设置第一个元素的样式。我该怎么做呢？

<style type='text/css'>
#element-b:empty [MAKE ELEMENT-A BOLD]{

}
</style>   

<div id="element-a">Some Element</div>
<div id="element-b">Some Other Element</div>

Answer 1

只需使用相邻的兄弟选择器+

即可

#element-a:empty + #element-b {font-weight:bold;}

+选择器将选择紧跟在所选元素之后的元素。

问题更新后更新：无法选择上一个元素。使用CSS，您只能通过+兄弟选择器选择下一个元素，但是选择前一个元素是不可能的。

Answer 2

如果你反转代码中元素的位置，你可以在CSS中执行此操作，如下所示：

<style type='text/css'>
#element-b:empty + #element-a {

}
</style>   

<div id="element-b">Some Other Element</div>
<div id="element-a">Some Element</div>

现在显然你的元素位置不合适，但你可以通过一些CSS定位来简单地重新排列它们。

Fiddle here。从元素B中删除文本以查看元素A粗体。