inert 是 html 原生布尔属性，无对应 css 属性或伪类可等价替代；它在 dom 层级强制禁用交互、焦点和可访问性暴露，css 仅影响渲染，无法实现其完整语义。
inert 属性不能用 CSS 样式声明替代
直接说结论：inert 是 HTML 原生布尔属性，没有对应的 CSS 属性或伪类（比如 :inert）能等价控制它的行为。你无法通过 style 或 CSS 规则“模拟”出 inert 的完整语义和运行时效果。
原因很实在：inert 不只是视觉禁用，它会从可访问性树中移除元素、阻止焦点进入、忽略所有用户交互（点击、键盘、触摸、pointerdown 等），且这些行为由浏览器引擎在 DOM 层级强制执行。CSS 只能影响渲染和部分交互反馈，无法干预焦点管理或辅助技术暴露逻辑。
为什么 :is(:disabled) 或 pointer-events: none 都不等于 inert
常见误区是试图用 CSS “凑出”类似效果，但每种方案都有明确短板：
-
pointer-events: none：仅阻止鼠标/触控事件，不影响键盘焦点（Tab 仍能聚焦）、屏幕阅读器仍可读取和操作，也不阻止focus()调用 -
:disabled伪类：只适用于表单控件（<button></button>、<input>等），对<div>、<code><span></span>、<a></a>无效；且需手动加disabled属性，语义不匹配 -
tabindex="-1"+aria-disabled="true"：能部分改善可访问性，但无法阻止右键、上下文菜单、拖放、或脚本调用click()，更不阻断子元素继承的交互能力 -
opacity: 0.5; cursor: not-allowed;：纯视觉提示，完全无功能约束 - 模态框背景遮罩层需完全“不可交互”，同时保持 DOM 存在（而非
display: none） - 临时禁用一组嵌套的复杂组件（含按钮、链接、输入框、自定义控件）
- 确保屏幕阅读器跳过整块区域（例如加载中占位内容）
- 避免 JS 手动遍历并逐个设置
disabled或移除事件监听器 - 保留
inert属性作为主控（现代浏览器生效） - 用 JS 检测支持性：
'inert' in HTMLElement.prototype - 不支持时，手动遍历子树，对可聚焦元素设
tabindex="-1"，对表单控件设disabled，再加pointer-events: none和aria-hidden="true"——但这仍是近似，不是等价
真正需要 inert 语义时，只能用 HTML 属性
如果你的场景涉及以下任一需求，就必须直接使用 inert 属性，而不是尝试 CSS 替代：
用法就是直接写：<div inert>...</div>。注意它支持 JavaScript 动态切换：el.inert = true 或 el.toggleAttribute('inert')。
兼容性与降级建议
inert 在 Chrome 111+、Edge 111+、Firefox 122+、Safari 18.1+ 已原生支持。旧浏览器不识别该属性，会静默忽略——这意味着它本身是安全的，但不会自动降级。
若需兼容老版本，推荐组合方案：
最易被忽略的一点：即使你用 CSS 把一个区域“看起来”灰掉了，只要没用 inert 或等效机制，键盘用户仍可能意外聚焦到其中的按钮，然后触发意料之外的操作。视觉反馈 ≠ 行为隔离。
