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

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 ~ section或aside + section：

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

在所有其他情况下，你将不得不使用JavaScript因为这些选择器只能从一个方向上下运行。

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