CSS:仅在以后的兄弟存在时选择元素

Question

在我的HTML结构中,我设置如下:

<body>
   <main>
      <section>
      ...
      </section>

      <aside>
      ...
      </aside>
   </main>
</body>

问题是,并非所有页面都有 <aside>

我需要选择<section>并max-width: 500px; 在<aside>存在时给它一个.默认值是section { max-width: 1000px; }(何时<aside>不存在)

与选择器不同,一个标签后面跟着另一个标签 ; 用户[提问]想要一直设置"B"样式.此外,在这个问题中,用户想要选择"B"(不是"A")

Answer 1

一个巧妙的小技巧

你可以实现你用了一招,以检查想要的东西,如果<section>元素是唯一的元素<main>.如果那里有任何其他元素,这将无效.在你的情况下,它应该像这样工作(http://jsfiddle.net/Ljm323qb/2/):

section {
     max-width: 500px;
}
/* The STAR of the show */
section:only-child {
     max-width: 1000px;
}

如此代码中所示:http://codepen.io/omarjuvera/pen/ByXGyK？editors = 110

您可以通过将<aside>元素放在元素之前<section>并使用兄弟选择器来实现它.

快速浏览一下
很快这将是可能的,有一个新的:has伪类(http://dev.w3.org/csswg/selectors-4/#relational)
你可以调用类似的东西,main:has(> aside) > section { ... }但我们会不幸的是,不得不等待:(

Answer 2

<body>
   <main>
      <aside>
      ...
      </aside>

      <section>
      ...
      </section>
   </main>
</body>

aside ~ section {
    max-width: 500px;
}