如何从文档大纲中移除元素？解决多布局下display:none元素的大纲显示问题

当元素被应用display: none;样式时，会被完全从文档大纲中移除——它不仅在视觉上消失，在语义层面也等同于不存在于页面中，屏幕阅读器也不会读取这些元素的内容。

针对你用媒体查询切换移动端/桌面端布局的场景：如果两套布局的元素是功能重复的（比如移动端专属菜单和桌面端导航栏），在对应断点给其中一套设置display: none;，就能让隐藏的那套不进入文档大纲，避免出现重复的大纲条目。

这里要注意和visibility: hidden;的区别：后者只是隐藏元素的视觉表现，元素本身依然会保留在文档大纲里，也会被屏幕阅读器识别，达不到你需要的移除大纲条目的效果。

内容的提问来源于stack exchange，提问作者Alyona