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

Question

我有这段HT​​ML。

<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有两种不同的风格。我单独展示padding-top到h1的地方。另一种风格是，当h1前面有h2时，我会删除padding-top .page-title h2 + h1

我的问题是，只有当page-controls.buttons前面有h1时，您才会选择h2。有可能吗？

Answer 1

以下是重组标记的解决方案：http://jsfiddle.net/functionalcss/k8dzg5zm/。

HTML：

<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>

CSS：

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