Html 当兄弟的孩子在场时的选择器

我有这段HTML

<div class="page-top">
    <div class="page-title">
        <h2></h2>
        <h1></h1>
    </div>
    <div class="page-controls buttons">
        <a href="" class="button"></a>
   </div>
</div>

对于

h1

，有两种不同的样式。当它单独显示时，我将

填充顶部

应用于

h1

。另一种样式，因为当

h1

前面有

h2

时，我会删除

填充顶部的
。页面标题h2+h1

我的问题是，只有当
h1
前面有
h2
时，您才会选择
页面控件按钮。有可能吗？
这里有一个重新构造标记的解决方案：

HTML:

不幸的是，您无法使用CSS选择以前的同级：
可能吗？
使用JavaScript，是的。
h1
应该在
h2
之前。如何控制何时显示或不显示
h2
？这是可能的，但需要重新构造标记。如果标记无法更改，那么JS/jQuery就是最好的选择。@DRD我可以更改标记，这不是问题。你会怎么做？谢谢。你的解决方案奏效了。尽管我决定给其中一个元素一个绝对位置，并完成我所需要的。
<div class="page-top">
    <h2>Smaller Heading</h2>
    <h1>Big Heading</h1>
    <div class="page-controls buttons">
        <a href="" class="button">Click me</a>
    </div>
</div>

.page-top > h2 +  h1 + .page-controls.buttons {
    background-color: yellow;
}