仅在元素旁边存在某个元素时才将样式应用于元素

Question

我在多个页面上使用<section>标记，但在一个页面上我使用<aside>标记前面的<section>标记。< / p>

如果我有一个<section>紧跟一个<aside>，我想对两者都应用宽度，让左边的部分浮动，然后向右浮动。

基本上，如果我有<section>和<aside>，我希望样式能够像这样工作：

section {
    width: 500px;
    float: left;
    padding: 8px;
}

aside {
    padding:8px; 
    width:400px;
    float:right;
}

如果我只有<section>，我希望它像：

section {
    padding: 8px;
}

有没有办法可以使用CSS3中的条件语句或伪类来完成此操作，而无需使用JavaScript，自定义类或单独的CSS文件？

Answer 1

仅当<section/>位于<aside/>：

之后才有效

<aside>content</aside>
<!-- if there is another node in between, use the '~' selector -->
<section>content</section>

在这种情况下，您可以使用aside ~ section或aside + section：

section {
    padding: 8px;
}
aside + section {
    width: 500px;
    float: left;
}

在所有其他情况下，您将不得不使用JavaScript，因为这些选择器仅在一个方向上工作，从上到下。

使用CSS4可能有一种方法可以使用Subject of a selector with Child combinator，但那是未来。此选择器已从规范中删除。