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

Question

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

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

Answer 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>