CSS：仅当存在更高版本的同级时才选择元素

omar 发表于 Dev

奥马尔

在我的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），该如何完成呢？

wawa

整洁的小把戏

您可以通过使用一个技巧来检查达到你想要什么，如果<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 { ... }但是我们将不得不等待，不幸的是:(

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-21

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章