如何设置默认打开或通过CSS打开的详细信息元素

HTML5添加了两个新元素，它们对标记文章的目录非常有用：详细信息和摘要

details元素默认为closed（隐藏除summary元素之外的所有内容），单击时，它会展开以显示其内容。执行此操作时，它会向details元素添加一个“open”属性

我希望元素默认打开，而不必将open属性添加到标记中。是否有可能通过CSS实现这一点，或者脚本必须发挥作用

例如：

<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>

目录

您可以将“打开”属性添加到详细信息标记中，如下所示：

目录

您也可以使用下面的替代方案，它仍然可以打开和关闭，但最初它是打开的，您可以测试它（我提供了计算机的输出）：

打开
始终打开
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。

检查以下输出的照片：

---

从未尝试过此操作，但可能

详细信息[open]{display:block；}

？为什么不使用“open”属性？@ToanNguyen在某些情况下（媒体查询），默认情况下显示内容可能会很有用。例如，如果屏幕从水平翻转到垂直，您可能希望强制打开内容。OP要求提供CSS或JS解决方案，而不需要HTML属性。@robrecord没有使用CSS的解决方案，因为CSS仅用于样式设置，而不用于更改标记状态。所以我建议的解决方案是添加open属性。如果可能的话，问你是否阅读了默认打开的标题。用JS编写脚本怎么样？

<div>
    <h3>Open</h3>
    <details open>
        <summary>Always open</summary>
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </details>
</div>