CSS选择组合多个选择器答案

【问题标题】：CSS selecting combining multiple selectorsCSS选择组合多个选择器
【发布时间】：2020-10-09 19:36:29
【问题描述】：

（与CSS "and" and "or" 或Is there a CSS parent selector? 不太相关，因为我在这里尝试实现不同的目标-and 使用两个选择器或创建一个不同的HTML 结构可以被css 用来解决我的问题）

嗨，我想知道 CSS 中是否有任何合理的方法可以在选择器之间创建一个合乎逻辑的AND。当我只引用一个 DOM 元素时，这似乎很容易，但当我尝试引用多个 DOM 元素时，整个概念变得更加困难。

我举个例子：

我有以下 HTML 结构，代表手风琴：

<div id="holder">
    <div id="toggle">
        <div id="content"></div>
    </div>
    <div id="data" class="show|hide">
    </div>
</div>

（顺便说一句，我正在使用手风琴的引导逻辑，所以我不希望在给定的结构中进行太多更改）

我想根据hide 或show 是否处于活动状态来设置#content::after。

这可以转换为以下语句：

#hodler > #data.show && #holder > #toggle > #content::after

但是，这是一个无效的语法。此外，CSS 没有父选择器。有什么解决办法吗？

谢谢！

【问题讨论】：

CSS 无法选择选择器中当前元素之前的元素，因此您需要将.show/hide 元素移动到#toggle 元素之前。这样，你就可以做到#holder>#data.show~#toggle>#content::after
@CBroe 我不喜欢给文档提供另一个结构，因为我使用引导程序，他们可能会不赞成。此外，StackOverflow 中的问题针对整个社区，因此寻求通用解决方案是更好的方法。
我不明白这是怎么开始的 - Bootstrap 在这些元素上设置了适当的类来识别它们是处于打开状态还是折叠状态。

标签： html css

【解决方案1】：

仅使用 CSS 和当前的 HTML 是不可能的。

如果#toggle 和#data 元素的顺序颠倒了，您可以像这样使用adjacent sibling combinator (+)：

<div id="holder">
    <div id="data" class="show|hide"></div>
    <div id="toggle">
        <div id="content"></div>
    </div>
</div>

#data.show + #toggle #content:after { /* show styles */ }
#data.hide + #toggle #content:after { /* hide styles */ }

【讨论】：