如何默认或通过 CSS 将详细信息元素设置为 OPEN

HTML5 添加了两个新元素，可用于标记文章的目录：details and summary.

详细信息元素默认为关闭状态（隐藏除摘要元素之外的所有内容），单击时，它会展开以显示其内容。当它执行此操作时，它会向详细信息元素添加一个“open”属性。

我希望元素默认打开，而不必将 open 属性添加到标记中。是否可以通过 CSS 来完成此操作，还是必须使用脚本？

Example:

<details>
<summary>Table of Contents</summary>
    <ul>
        <li><a href="#" class="active">Introduction</a></li>
        <li><a href="/2/">Body</a></li>
        <li><a href="/3/">Conclusion</a></li>
    </ul>
</details>

您可以添加open属性进入details像这样的标签：

<details open>
    <summary>Table of Contents</summary>
    <ul>
        <li><a href="#" class="active">Introduction</a></li>
        <li><a href="/2/">Body</a></li>
        <li><a href="/3/">Conclusion</a></li>
    </ul>
</details>

然后，详细信息将默认展开。