CSS 的 ::details-content 伪元素提供了一种方法来选择和应用样式到 <details> 元素的内部部分，而不会将样式泄露到 <summary>。
details::details-content {
background-color: hsl(0 0% 0%);
}语法
<element-selector>::details-content {}我们在那里说 <element-selector>，但 ::details-content 特别与 <details> 元素绑定，这意味着在许多情况下，您将使用它作为选择器。
details::details-content {}当然，如果您想选择一个特定的 <details> 元素，那么也可以通过类来选择它。
.my-class::details-content {}终于，有一种方法可以为 details 内容设置样式！
典型 <details> 元素的 HTML 看起来像这样
<details>
<summary>Details Example</summary>
Whatever content or other markup we want in this space!
</details>只需在 CSS 中选择 <details> 元素，就可以轻松地为它设置样式。
我们还可以使用 open 属性在元素展开时为它设置样式。
为 <summary> 元素添加样式同样容易，因为我们也可以直接选择它。
我们可以为 <summary> 之前的那个小箭头设置样式。如果我们打开开发者工具并检查元素，我们会看到 Shadow DOM 中有一个针对 -webkit 的特定伪元素。
看到了吗？它是 <summary> 元素的伪元素，所以我们可以像这样选择它。
summary::-webkit-details-marker {
/* Style away! */
}但是，我们如何在世界上为 <details> 元素内部的内容设置样式？这就是我们一直缺少的东西，也是 ::details-content 伪元素存在的意义。在撰写本文时，::details-content 尚未被任何浏览器实现，因此我们没有具体的方法来展示它的工作原理。假设在它正式被采用为一项功能之前，规范不会发生任何变化，它可能看起来像这样。
details::details-content {
background-color: hsl(0 0% 0% / .85);
margin-block: 1rem;
}这就是我们为什么需要 ::details-content 的原因。它算是 <details> 样式难题中缺失的一块。
示例
我们已经看过了示例，但规范中有一个值得提到的示例。它很有意思，因为它演示了我们如何才能为内容设置动画，使其淡入视图。
details::details-content {
display: block;
opacity: 0;
transition: content-visibility 300ms allow-discrete step-end, opacity 300ms;
}
details[open]::details-content {
opacity: 1;
transition: content-visibility 300ms allow-discrete step-start, opacity 300ms;
}什么？！ 这表明伪元素将与原生 CSS 过渡配合使用，甚至与多步过渡配合使用！让我们继续添加一个该功能的实时演示，看看它是否在得到更广泛支持后有效。
浏览器支持
目前还没有！我们将随着支持的推出而添加一个完整的支持表格。
规范
::details-content 属性在 CSS 伪元素模块级别 4 规范中定义。它目前处于编辑草案状态，这意味着它尚未成为 WHATWG 在 HTML 方面和 CSS 工作组在 CSS 方面的正式建议，它可能会在正式建议发布之前发生变化。因此，如果您正在考虑是否要在生产环境中尝试使用它，最好还是耐心等待更多浏览器实现对它的支持。
如果您感兴趣，该定义于 2024 年 6 月添加到规范中，您可以在这里找到提交。您还可以在几个GitHub 线程中找到对它的讨论，以获得更多上下文信息。
