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

Question

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

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

Mac： ~/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。为更常见的选择器添加规则时，如果网页也使用这些相同的选择器（即谷歌搜索），则规则也适用于这些页面或网站。

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

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

我已尝试使用@moz-document domain ()和@moz-document url-prefix ()声明，但无法弄明白......

我现在离开太远了，所以我希望有人可以帮忙。

---

以下是我目前进度的截图：

Answer 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?

请参阅下面的“检查检查员”截图：