<dialog>无法纯CSS关闭，因其open属性只读且无CSS伪类响应；可行的无JS方案是<details>或:target，但语义和功能受限。
<dialog> 标签本身无法用纯 CSS 实现可靠关闭——它没有类似 <details> 的 open 属性切换机制，也没有可被 CSS 选择器驱动的“关闭态”状态变量。所谓“纯 CSS 关闭”，实际是绕开 <dialog>，改用其他原生 HTML 特性模拟弹窗行为。
为什么 <dialog> 不能靠 CSS 控制开关
浏览器将 <dialog> 视为一个需要显式激活的交互容器：它的 open 属性仅用于初始渲染时声明“已打开”，但该属性是只读的（JS 修改会静默失败），且无对应 CSS 伪类（如 :open）可监听或响应。CSS 无法监听 DOM 属性变更，也无法触发 showModal() 或 close()。直接写 <dialog open> 只会让它初始可见，但不模态、无遮罩、不锁焦点——这根本不是你想要的弹窗。
真正可行的无 JS 替代方案：用 <details> + :target
这两个方案不依赖 JS，且能实现“点击即开/关”的交互感，但语义和能力有明确边界：
-
<details>：适合非模态展开提示（如 FAQ 折叠面板），<summary>点击即可切换，但无遮罩、不阻断背景操作、不居中、不支持 Esc 关闭 -
:target：利用 URL 哈希定位元素，配合display: none / block切换显示，可模拟模态效果，但会改变地址栏、前进后退历史中留下记录、无法通过点击 backdrop 关闭（除非手动加锚点）
示例（:target 方案）：
立即学习“前端免费学习笔记（深入）”；
<a href="#popup">打开弹窗</a>
<div id="popup" class="modal">
<div class="modal-content">
<p>内容</p>
<a href="#">×</a>
</div>
</div>
<style>
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); }
.modal:target { display: flex; align-items: center; justify-content: center; }
.modal-content { background: white; padding: 1rem; }
</style>
别踩坑：这些“看似无 JS”实则无效的做法
以下写法在实践中都会失效或产生副作用：
- 给
<dialog>写open属性 +display: block：浏览器忽略display，仍保持隐藏；即使强制显示，也无 backdrop、无焦点管理、Esc 键无效 - 用
<dialog open></dialog>配合dialog[open] { display: block; }：[open]属性存在，但不表示“已激活模态态”，只是初始标记，且 Chrome/Firefox 对此属性的样式响应极不稳定 - 试图用
input[type=checkbox]hack 控制<dialog>：<dialog>不响应兄弟选择器（如input:checked ~ dialog），因为它的渲染逻辑完全独立于 CSS 流程 - 依赖
dialog::backdrop的点击事件做关闭：该伪元素不可编程，无法绑定事件，CSS 里只能改样式，不能触发行为
真正要“免 JS 关闭”，唯一合法路径是 <form method="dialog"> ——但它必须配合 showModal() 启动，而启动这一步无法绕过 JS。所以严格来说，<dialog> 的完整模态生命周期（打开 + 关闭）不可能脱离 JS 存在。那些宣称“纯 CSS 实现 dialog 关闭”的教程，要么偷换了概念（用 <details> 或 :target 冒充），要么掩盖了背后必需的 JS 初始化逻辑。
