summary标签是啥？HTMLsummary标签样式调整秘籍

summary 标签的 marker 样式无法生效怎么办？

有时，你可能会发现 summary::marker 样式无法生效。这通常是因为浏览器的默认样式覆盖了你的自定义样式。解决方法之一是使用 list-style: none; 移除默认的 marker，然后使用 CSS 的 ::before 伪元素来创建自定义 marker。

<style>
details > summary {
  list-style: none; /* 移除默认 marker */
  padding-left: 20px; /* 为自定义 marker 留出空间 */
  position: relative;
}

details > summary::before {
  content: '+ '; /* 自定义 marker 内容 */
  position: absolute;
  left: 0;
}

details[open] > summary::before {
  content: '- '; /* 展开时的 marker 内容 */
}
</style>

<details>
  <summary>点击展开/折叠</summary>
  <p>这里是详细内容。</p>
</details>

这种方法通过绝对定位和伪元素，可以更灵活地控制 marker 的样式。

如何使用 JavaScript 动态修改 summary 标签的样式？

除了 CSS，还可以使用 JavaScript 动态修改 summary 标签的样式。这在需要根据用户的交互或其他条件动态改变样式时非常有用。

<script>
const details = document.querySelector('details');
const summary = details.querySelector('summary');

details.addEventListener('toggle', () => {
  if (details.open) {
    summary.style.backgroundColor = '#e0e0e0';
  } else {
    summary.style.backgroundColor = '#f0f0f0';
  }
});
</script>

<details>
  <summary>点击展开/折叠</summary>
  <p>这里是详细内容。</p>
</details>

这段代码监听