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