我有一个标准

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

在同一页的其他地方加<div class="something">分(details分之外).如何在details[open]时隐藏div,例如通过设置.something {display: none;}

我试过了

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

>和没有>,但它没有任何作用.

我也对JS持开放态度,但我希望这在css中也能起作用.

推荐答案

您可以使用同级操作符.但请不要说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,这种解释:

enter image description here

Html相关问答推荐

如何正确使用counter()、counter—increment()和counter—reset()嵌套标题?

如何格式化HTML文本,使其环绕关键字

注册组件不显示当我导航到注册站点

HTML表行悬停仅适用于偶数行

图像不在HTML文件中显示

需要帮助创建一个简单的html css网格布局

平移变换下的SVG剪辑路径行为

当文本添加到元素中时,将元素拉到页面上

如何设计缠绕锚点元素的样式?

可以通过悬停时的自定义区域更改文本属性吗?

从触发元素移动到有间隙的内容时 CSS 工具提示关闭

复制两个

会产生一个空行;复制

元素不会

为 HTML5 文本字段设置最后六位正则表达式模式

如何在 flex 项目中忽略子元素的宽度

删除按钮组件时 bootstrap col-auto 布局高度对齐中断

如何将第一个 p 标签放在其下方第二个 p 标签的中间

为什么将 p 元素的垂直边距设置为 1 px 会出现滚动条?

使用 htmloutput 在shiny 的应用程序中呈现文本

我可以将两个元素之间的所有空间都放在弹性框或网格中吗?

在 EJS 中将元素放置在彼此下方的列中