假设我们有这种风格:
.parent .child { ... } .parent:hover .child { ... }
两个选择器都为子元素设置样式.
我想要的是编辑第二种风格.
>我点击.parent并在Chrome开发者工具中设置:悬停状态
>点击.child元素以获得孩子的风格,但……
当我点击.child时,父母的悬停消失了(因为它现在设置在.child上).
这适用于Firebug,但我需要它在Chrome中…
Chrome 21.0.1180.89 m
解决方法
更新:Chrome现在具有以下新热点:
>右键单击子元素,然后选择“检查元素”
> Chrome将打开包含所选项目的“元素”视图
>在“元素”视图中,右键单击父元素,然后选择“强制元素状态▶:悬停”
>再次在“元素”视图中选择子元素.
较旧,有效但令人讨厌的技术如下:
>将子元素本身悬停(也悬停父元素).
>右键单击该子项.
>使用键盘(非鼠标)将上下文菜单选项向下移动到“Inspect Element”并按Enter键
> Hurray,徘徊的父母和选定的孩子的CSS规则可用
>编辑规则. (您可以移动鼠标来执行此操作;该项目将被取消,但带有:悬停在其中的CSS规则不会消失.)
>将鼠标悬停在元素上以查看更改的规则生效.
请注意,如果在步骤3中执行了错误操作(如果使用鼠标),则必须先重新选择其他元素,然后再重试.