html - CSS选择组合多个选择器

Question

（与CSS "and" 和 "or"不太相关，或者Is there a CSS parent selector?，因为我试图在这里实现不同的目标 - 要么使用and两个选择器，要么创建一个不同的结构HTML来解决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活动状态进行设置。

这可以转换为以下语句：

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

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

谢谢！

score 0 · Accepted Answer

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

如果#toggleand#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 */ }

1 回答 1