css实现收缩列表detail标签使用summary

是的，你可以使用 CSS 来实现收缩列表（折叠面板），并且可以使用 HTML5 中的 `<details>` 和 `<summary>` 元素来创建可访问的折叠面板。

`<details>` 元素用于定义一个可折叠的区域，可以包含一些内容，该区域的默认状态可以是展开或收缩。而 `<summary>` 元素用于定义标题，当用户点击该标题时，可以展开或收缩该区域。

下面是一个简单的示例代码：

<details>
  <summary>点击展开/收缩</summary>
  <p>这里是收缩列表的内容。</p>
</details>

你可以使用 CSS 对 `<details>` 和 `<summary>` 元素进行样式设置，例如修改标题样式、修改展开/收缩图标等等。下面是一个示例代码：

/* 修改标题样式 */
summary {
  font-size: 16px;
  color: #333;
  cursor: pointer; /* 改变鼠标指针形状 */
}

/* 修改折叠状态下的图标 */
details[open] summary::before {
  content: "-";
  margin-right: 5px;
}

/* 修改展开状态下的图标 */
details:not([open]) summary::before {
  content: "+";
  margin-right: 5px;
}

上面的代码中，使用 `::before` 伪元素来添加图标，并且使用 `details[open]` 和 `details:not([open])` 来区分展开和收缩状态。当 `<details>` 元素的 `open` 属性为 `true` 时表示展开状态，否则为收缩状态。

希望对你有所帮助！