详情时隐藏另一个元素[打开]

Question

我有一个标准

<details>
<summary>
Text
</summary>
</details>

和同一页面其他地方的 <div class="something">（完全在 details 之外）。如何在 details[open] 时隐藏 div，例如通过设置 .something {display: none;}?

我试过了

details[open] > .something {
  display: none;
}

有和没有 >，但它没有任何作用。

我也对 JS 持开放态度，但我希望它能在 css 中工作。

Answer 1

您可以使用兄弟运算符。但请注意 CSS 不能向上或反向移动。

details[open] ~ .nested .something,
details[open] + .something {
  display: none;
}

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>
<div class="something">Something something, open details.</div>
<div class="nested">
  <p>Let's try to target the below too.</p>
  <p class="something">You won't see this if details is open.</p>
</div>

TBH，这有点解释：

详情时隐藏另一个元素[打开]

Hide another element when details[open]

html

css

css-selectors