如何仅在 CSS 中定位 Chrome DevTools 窗口？答案

【问题标题】：How to ONLY target Chrome DevTools window in CSS?如何仅在 CSS 中定位 Chrome DevTools 窗口？
【发布时间】：2013-04-18 11:00:17
【问题描述】：

几天前我遇到了this thread，希望摆脱 DevTools 窗口中的纯白色背景。一件事导致另一件事，我开始使用基本 CSS 文件 (chrome-devtools://devtools/devTools.css) 作为指南为更多元素添加规则。

可以在以下位置找到正在修改的文件：

苹果机： ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

PC： C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css

Ubuntu (Chromium)： ~/.config/chromium/Default/User StyleSheets/Custom.css

在中途，我在使用非常常见的选择器修改规则时遇到了问题。我遇到的前两个是#main 和#toolbar。在为更常见的选择器添加规则时，如果网页也使用这些相同的选择器（即 google 搜索），那么这些规则也适用于这些页面或网站。

我明白为什么会这样。我的问题是……

有没有办法通过这个 Custom.css 文件只针对 Chrome 中的 DevTools 窗口而不影响任何其他域？

我尝试过使用 @moz-document domain () 和 @moz-document url-prefix ()declarations 但无法弄清楚...

我现在放弃太远了，所以我希望有人能提供帮助。

这是我目前进度的截图：

【问题讨论】：

标签： css google-chrome customization google-chrome-devtools

【解决方案1】：

好的，所以在挖掘之后，我注意到我实际上错过了原始文章页面顶部的通知：

自发表本文以来，Chrome 团队添加了一个唯一 ID 到 Chrome 开发工具的容器。 ID是#-webkit-web-inspector(Trac Reference)

所以，我上面帖子的修复方法是将body#-webkit-web-inspector 添加到您的所有选择器中，它运行良好，因此只针对 chromes DevTools 窗口。此外，非常重要...对于那些想要创建更完整主题的人，强烈建议通过“检查检查员”来完成。可以在此处找到有关如何执行此操作的更多信息：How do you inspect the web inspector in chrome?

请看下面的“inspecting the inspector”截图：

【讨论】：