2

数日前、DevTools ウィンドウの真っ白な背景を取り除こうとして、このスレッドに出会いました。chrome-devtools://devtools/devTools.cssあることが別の原因となり、ベース CSS ファイル ( ) をガイドとして使用して、さらに多くの要素のルールを追加することから始めました。

変更中のファイルは、次の場所にあります。

マック： ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

PC: C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css

Ubuntu (クロム): ~/.config/chromium/Default/User StyleSheets/Custom.css

途中で、非常に一般的なセレクターを使用してルールを変更するときに問題が発生し始めました。最初に出くわしたのは#mainと#toolbar. より一般的なセレクターのルールを追加するときに、Web ページがこれらの同じセレクター (つまり、Google 検索) も使用している場合、ルールはそれらのページまたはサイトにも適用されます。

なぜこれが起こっているのか理解しています。私の質問は...

他のドメインに影響を与えずに、この Custom.css ファイルを介して Chrome の DevTools ウィンドウのみをターゲットにする方法はありますか?

@moz-document domain ()and宣言を使用してみましたが、@moz-document url-prefix ()わかりません...

今は諦めるには程遠いので、誰か助けてくれることを願っています。

これまでの私の進行状況のスクリーンショットは次のとおりです。Chrome DevTools Mod

4

1 に答える 1

2

わかりましたので、掘り下げた後、元の記事ページの上部にある通知を実際に見逃していることに気付きました。

この記事を公開して以来、Chrome チームは Chrome Dev Tools のコンテナに一意の ID を追加しました。ID は#-webkit-web-inspector( Trac Reference )

したがって、上記の投稿に対する修正は、body#-webkit-web-inspectorすべてのセレクターに追加することであり、完全に機能するため、Chrome の DevTools ウィンドウのみをターゲットにします。また、非常に重要です...より完全なテーマを作成したい人には、「インスペクターの検査」を介して行うことを強くお勧めします. これを行う方法の詳細については、次を参照してください: How do you inspect the web inspector in chrome?

以下の「インスペクターの検査」のスクリーンショットを参照してください。 ここに画像の説明を入力

于 2013-04-25T10:59:43.750 に答える