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

Question

是否有可以针对 details 的 CSS 选择器(如伪类)？元素什么时候打开？

一种可能的用途是更改 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>