html - 将样式应用于元素，仅当某个元素旁边存在时

Question

我<section>在几个页面上使用了标签，但在一个页面上我使用了一个<aside>前面有标签的<section>标签。

如果我有一个<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 ~ sectionor aside + section：

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

在所有其他情况下，您必须使用 JavaScript，因为这些选择器只能在一个方向上工作，从上到下。

使用 CSS4 可能有一种方法可以将选择器的 Subject 与 Child 组合器一起使用，但那是未来。此选择器已从规范中删除。