打开时详细信息元素的 CSS 选择器

【问题标题】：CSS selector for details element when opened打开时详细信息元素的 CSS 选择器
【发布时间】：2020-04-19 01:40:23
【问题描述】：

是否有一个 CSS 选择器（如伪类）可以在打开时定位 details 元素？

一种可能的用途是在用户打开details 元素时更改summary 元素的颜色。

【问题讨论】：

【解决方案1】：

使用属性[open]选择器

details summary {
  background: pink;
}

details {
  background: lightgreen;
}

details[open] summary {
  background: red;
}

<details>
  <summary>Details</summary>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, incidunt dolores! Laudantium fugit aspernatur rem autem, expedita ut id necessitatibus, perferendis, accusantium esse repudiandae?
</details>

【讨论】：