CSS 选择组合多个选择器

Question

(Not quite related to CSS "and" and "or" , or Is there a CSS parent selector? , as I am trying to achieve different goal here - either and ing two selectors or creating a different HTML structure that can be used by css解决我的问题）

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

我举个例子：

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

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

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

我想设置#content::after取决于hide或show是活动的 state。

这可以转换为以下语句：

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

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

谢谢！

Answer 1

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

如果#toggle和#data元素的顺序颠倒了，您可以像这样使用相邻的同级组合符 ( + ) ：

<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 */ }