Chromeデベロッパーツールでは、要素を調べてその要素に適用されている既存のCSSルールを編集するのは簡単ですが、まったく新しいスタイルのルールを作成したい場合はどうでしょうか。
私の場合、私がやりたかったのは、次のスタイルルールを適用することでした。
br {display：none} hr {margin-top：20px} font {font-size：18px}
アジャイルマニフェストの背後にある原則に基づいて、ブラウザから直接1枚のA4用紙に印刷できるようにします。
私がすでにリンクしているChromeデベロッパーツールの公式ドキュメントには、新しいルールとプロパティの追加に関するセクションがありますが、それは古く、最新バージョンのChromeではそのようには機能しません。
Stylesこれで、ペインに「新しいスタイルルール」専用のボタンが表示されます。プラス（+）のように見えます：
これにより、セレクターを自分で定義できる新しいスタイルブロックが作成されます。
これは、その場での小さな修正には便利ですが、余分な中括弧が必要なCSS3メディアクエリや、CSSのセクション全体をテストに貼り付ける場合にはうまく機能しません。
これに対する解決策は、最初に[ + ]ボタンをクリックして新しいスタイルを追加し、次にEnterキーを押す（または隣接する空白をクリックする）ことです。
これにより、inspector-stylesheet：1というインスペクタースタイルシートへのリンクが表示されます。
そのリンクをクリックすると、複雑なルールを記述できるライブスタイルシート全体が開き、テスト用に外部スタイルシート全体を貼り付けることができます。
CSSライブを作成するためのChromeプラグインであるCSSBrushを使用してみてください。ページからセレクターを作成できます。完全なCSSパスを作成することも、フィルターをかけて短いパスを作成することもできます。CSSプロパティをライブで編集する場合、コンテキスト依存メニューは非常に役立ちます。プロパティやセレクターのオン/オフを切り替えることもできます。