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”）

仅当
```
<section>
```
存在时，我才需要设置
```
<aside>
```
样式。
我无法更改 HTML 的顺序 >_<
只用CSS可以完成吗？
我需要什么选择器或如何设置它？
如果不能用 CSS 来完成（我宁愿只用 CSS），我该如何实现呢？

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

兄弟选择器的一般内容

有一个

选择器，它会选择紧随该元素之后的同级元素 (https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors)

还有

选择器选择所有以下同级（https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors）

您可以通过将

<aside>

元素放在

<section>

元素之前并使用同级选择器来实现。

这是一个例子：http://jsfiddle.net/Ljm323qb/1/

快速展望未来
很快这将成为可能，通过一个新的

:has

伪类 (http://dev.w3.org/csswg/selectors-4/#relational)
您可以拨打类似

main:has(> aside) > section { ... }

之类的电话，但不幸的是，我们必须等待:(

Answer 2

没有 JavaScript

如果您可以将 html 元素的顺序更改为：

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

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

您可以使用同级选择器来做到这一点：

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

Answer 3

您可以使用

jQuery

将类 .haveSidebar 切换到 body 标签，并使 section 标签的

CSS

取决于该类是否存在于 body 标签上：

HTML

<main>
    <section>
    </section>

    <aside>
    </aside>
</main>

CSS

main {
    width:100%;
}
main aside {
    width:300px;
    background:red;
    min-height:300px;
    float:left;
}
main section {
    width:100%;
    background:green;
    min-height:300px;
    float:left;
}
body.haveSidebar main section {
    width: calc(100% - 300px);
}

JS

var sideBar = $('body > main > aside');
if (sideBar.length > 0) {
    $('body').addClass('haveSidebar');
} else {
    $('body').removeClass('haveSidebar');
}

摆弄旁白标签

没有旁白标签的拨弄

更新

没有

calc()

的解决方案，通过使用

margin-left

属性

main aside {
    width:300px;
    background:red;
    min-height:300px;
    position:relative;
}
main section {
    width:100%;
    background:green;
    min-height:300px;
    float:left;
}
.haveSidebar main section {
    margin-left:301px;
}

不使用 calc() 进行拨弄

Answer 4

尽管这不是最简洁的方法，但您可以在文档就绪的 javascript 函数上运行，以检查aside标签是否存在，并相应地将内联CSS注入到部分标签中。

Answer 5

如果您可以将 side 元素放在第一部分之前，则可以使用相邻同级选择器:

aside + section{ max-width: 500px }

Answer 6

试试这个，我相信它只能用一些javascript来完成。

if ($('main').find('aside').length>0)
{
    $('main').find('section').addClass('specificSection');
}

Answer 7

使用 JavaScript 来完成此操作相当简单。

例如，这将起作用：

<script>
    window.onload = function() {
        if (document.getElementsByTagName('aside')[0]) {
           document.getElementsByTagName('section')[0].style.max-width = '500px';
        } else {
            document.getElementsByTagName('section')[0].style.max-width = '1000px';
        }
    }
</script>

Answer 8

可以使用 :has() 选择器来实现，如下：

:has(main aside) {
  section {
    max-width: 500px;
  }
}

CSS：仅当存在较晚的同级元素时才选择元素[重复]

问题描述投票：0回答：8

8个回答

一个巧妙的小技巧

兄弟选择器的一般内容

没有 JavaScript

如果您可以将 html 元素的顺序更改为：

您可以使用同级选择器来做到这一点：

最新问题

CSS：仅当存在较晚的同级元素时才选择元素[重复]

问题描述 投票：0回答：8

8个回答

一个巧妙的小技巧

兄弟选择器的一般内容

没有 JavaScript

如果您可以将 html 元素的顺序更改为：

您可以使用同级选择器来做到这一点：

最新问题

问题描述投票：0回答：8