html - 当兄弟的 child 出现时的选择器

Question

我有这段 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 有两种不同的样式。当它单独显示时，我将 padding-top 应用于 h1。另一种风格，当 h1 前面有 h2 时，我用 .page-title 删除了 padding-top h2 + h1

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

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