如何在Chrome开发工具中设置元素:悬停状态并编辑子项的样式

Question

假设我们有这种风格:

.parent .child { ... }

.parent:hover .child { ... }

两个选择器都为子元素设置样式.

我想要的是编辑第二种风格.

1. 我点击.parent并:hover在Chrome开发者工具中设置状态
2. 单击一个.child元素以获得孩子的风格,但......

当我点击.child父母上的悬停消失时(因为它现在已经设置.child).

^{这适用于Firebug,但我需要它在Chrome中...}

Chrome 21.0.1180.89 m

Answer 1

更新:Chrome现在具有以下新热点:

1. 右键单击子元素,然后选择"检查元素"
   • Chrome会在选中项目的情况下打开"元素"视图
      

2. 在"元素"视图中,右键单击父元素,然后选择"强制元素状态▶:悬停"
   

3. 再次在Elements视图中选择子元素.

较旧,有效但令人讨厌的技术如下:

用这个JSFiddle测试:

1. 将子元素本身悬停(也悬停父元素).
2. 右键单击该子项.
3. 使用键盘(不是鼠标)将上下文菜单选项向下移动到"Inspect Element",然后按Enter
   • 华友世纪,徘徊的父母和选定的孩子的CSS规则是可用的
4. 编辑规则.(您可以移动鼠标来执行此操作;该项目将被取消,但其中的CSS规则:hover将不会消失.)
5. 将鼠标悬停在元素上以查看更改的规则生效.

请注意,如果在步骤3中执行了错误操作(如果使用鼠标),则必须先重新选择其他元素,然后再重试.