DevTools 技巧合集八

可视化和调试CSS层叠层级

层叠层级（Cascade layers）是一个CSS特性，允许Web开发人员在多个层级中定义其CSS样式，并控制这些层级应用的顺序。层叠层级旨在提供一种优雅的解决方案，解决我们过去通常通过使用!important或人为增加选择器特异性来解决的问题。
让我们看看如何在开发者工具中可视化和调试这些层级。所有浏览器的开发者工具在其样式/规则面板中都支持层叠层级，某些浏览器具有更高级的功能。

所有浏览器：

• 1. 打开一个使用层叠层级的页面，就像上面的示例一样。
• 2. 检查一个元素，该元素在其中一个层叠层级中定义了样式，比如上述演示中的某个绿色链接。
• 3. 在侧边栏中，显示CSS规则的地方（在不同浏览器中称为Styles或Rules），规则按照层叠层级排序，优先级最高的层级在顶部，最低优先级在底部。
• 4. 属于层叠层级的规则旁边有一个标签，标明 @layer <layername>。
     

Chrome 和 Edge（仅限）：

• 除了上述操作，Chrome 和Edge还有一个“层级视图”，显示层叠层级的列表：
• 1. 打开一个使用层叠层级的页面，就像上面的示例一样。
• 2. 检查一个元素，该元素在其中一个层叠层级中定义了样式，比如上述演示中的某个绿色链接。
• 3. 在样式面板工具栏中（搜索字段旁边），点击“切换`CSS层级视图”按钮，以显示层级列表。
     

模拟强制色彩模式

操作系统提供了一种辅助功能，可以将屏幕上显示的颜色转换为高对比度模式。当您使用这种功能时，它会影响屏幕上的所有内容：桌面、文件夹、本机应用程序、网页浏览器及其网页内容等。

这意味着网页不会以它们通常的颜色显示，而是显示为高对比度模式。了解更多关于Windows高对比度模式以及如何在网站中应用样式的信息，请参阅这里，以及关于强制色彩媒体查询的信息。

然而，如果您自己没有使用这种高对比度模式，您就无法知道您的网站对使用这种模式的用户是什么样子的。为了确保您的内容对这种模式的用户完全可访问，并避免必须切换整个操作系统到此模式，您可以使用Edge或Chrome来模拟强制色彩模式的能力。

在Edge或Chrome中：

• 1. 打开命令菜单：Ctrl+Shift+P（或在Mac上是Cmd+Shift+P）。
• 2. 输入 Rendering 并按 Enter 键。
• 3. 在渲染面板中，向下滚动到 Emulate CSS media feature forced-colors，并从下拉菜单中激活它。