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

前端之家收集整理的这篇文章主要介绍了css – 如何设置元素:Chrome开发工具中的悬停状态并编辑子项的样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
假设我们有这种风格:
.parent .child { ... }

.parent:hover .child { ... }

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

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

>我点击.parent并在Chrome开发者工具中设置:悬停状态
>点击.child元素以获得孩子的风格,但……

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

这适用于Firebug,但我需要它在Chrome中…

Chrome 21.0.1180.89 m

解决方法

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

>右键单击子元素,然后选择“检查元素”

> Chrome将打开包含所选项目的“元素”视图

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

>再次在“元素”视图中选择子元素.

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

测试this JSFiddle

>将子元素本身悬停(也悬停父元素).
>右键单击该子项.
>使用键盘(非鼠标)将上下文菜单选项向下移动到“Inspect Element”并按Enter键

> Hurray,徘徊的父母和选定的孩子的CSS规则可用

>编辑规则. (您可以移动鼠标来执行此操作;该项目将被取消,但带有:悬停在其中的CSS规则不会消失.)
>将鼠标悬停在元素上以查看更改的规则生效.

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

猜你在找的CSS相关文章