HTML中标签的作用及使用场景

summary {
  font-weight: bold; /* 加粗 */
  cursor: pointer;   /* 鼠标悬停时显示手型，明确可点击 */
  padding: 10px 15px; /* 内边距 */
  background-color: #f0f0f0; /* 背景色 */
  border-bottom: 1px solid #ddd; /* 底部边框 */
  outline: none; /* 移除点击时的默认聚焦轮廓 */
}

这里有个小细节，outline: none; 慎用，它会影响键盘用户的可见性。更好的做法是自定义聚焦样式，比如summary:focus-visible { outline: 2px solid blue; }。

至于那个默认的小三角指示器，它其实是通过::marker伪元素来控制的。你可以通过CSS来隐藏它，然后用背景图或者伪元素（::before/::after）来创建自定义的展开/收起图标。

/* 隐藏默认的小三角 */
summary::-webkit-details-marker {
  display: none; /* 针对WebKit内核浏览器 */
}
summary::marker {
  display: none; /* 标准写法 */
}

/* 使用伪元素自定义图标 */
summary {
  position: relative;
  padding-left: 30px; /* 为图标留出空间 */
}

summary::before {
  content: '+'; /* 默认是加号 */
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

details[open] summary::before {
  content: '-'; /* 展开时变成减号 */
  transform: translateY(-50%) rotate(0deg); /* 或者你可以旋转它 */
}

当然，如果你需要更复杂的交互，比如点击

document.querySelectorAll('details').forEach(detail => {
  detail.addEventListener('toggle', function() {
    if (this.open) {
      console.log('Details 已展开:', this.querySelector('summary').textContent);
      // 可以在这里加载内容或者执行其他操作
    } else {
      console.log('Details 已收起:', this.querySelector('summary').textContent);
    }
  });
});