css - Chrome開発ツールで要素の：hover状態を設定し、子のスタイルを編集する方法

Question

このスタイルがあるとします。

.parent .child { ... }

.parent:hover .child { ... }

両方のセレクターは、子要素のスタイルを設定します。

私が欲しいのは、2番目のスタイルを編集することです。

1. Chromeデベロッパーツールをクリックして状態.parentを設定します:hover
2. 要素をクリックし.childて子供のスタイルを取得しますが...

親のホバーをクリックする.childと消えます（現在はオンに設定されているため.child）。

^{これはFirebugでも機能しますが、Chromeでは必要です...}

クローム21.0.1180.89m

Answer 1

更新：Chromeに次の新しい注目度が追加されました。

1. 子要素を右クリックして、[要素の検査]を選択します
   • Chromeは、アイテムが選択された状態で要素ビューを開きます
      

2. 要素ビューで、親要素を右クリックし、[要素の状態を強制する▶：ホバー]を選択します。
   

3. 要素ビューで子要素を再度選択します。

---

古い、有効だが不快なテクニックは次のとおりです。

このJSFiddleでテスト済み：

1. 子要素自体にカーソルを合わせます（これは親にもカーソルを合わせます）。
2. 子を右クリックします。
3. （マウスではなく）キーボードを使用して、コンテキストメニューの選択を[要素の検査]に移動し、を押します。Enter
   • ホバーされた親と選択された子のCSSルールであるHurrahが利用可能です
4. ルールを編集します。（これを行うには、マウスを動かすことができます。アイテムはホバーされませんが、その中にあるCSSルールは:hover消えません。）
5. 変更されたルールが有効になるのを確認するには、要素の上にマウスを戻します。

手順3で間違った場合（マウスを使用する場合）は、再試行する前に、最初に別の要素を選択する必要があることに注意してください。

Answer 2

（Chrome 22）

パネルで要素をElements右クリックし、コンテキストメニューで選択します。出来上がり。.parentForce Element State > :hover

または、右側のペインヘッダーにある[点線の長方形上のポインタ]ボタンをクリックしてStyles、現在選択されている要素に強制される疑似クラスをオン/オフにすることもできます。

要素の状態は、現在選択されている要素だけでなく、DOMツリー内の任意の要素に強制できるようになりました。

Answer 3

開発ツールを開いて、ヘッダーバーの右側にあるスタイルペインを見ると、Stylesカスタムインスペクタースタイルシートルールを追加できるプラスボタンがあります。これはあなたが探しているものかもしれません。