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

Question

假设我们有这种风格：

.parent .child { ... }

.parent:hover .child { ... }

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

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

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

当我点击.child时，父母上的悬停消失了（因为它现在已设置在.child上）。

^{虽然这在Firebug中有效，但我需要在Chrome中使用它...}

  

Chrome 21.0.1180.89 m

Answer 1

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

1. 右键单击子元素，然后选择“检查元素”
   • Chrome会打开包含所选项目的元素视图
     

2. 在“元素”视图中，右键单击父元素，然后选择“强制元素状态▶：悬停”
   

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

---

旧的，有效但讨厌的技术如下：

使用this JSFiddle进行测试：

1. 将子元素本身悬停（也会悬停父元素）。
2. 右键单击该子项。
3. 使用键盘（非鼠标）将上下文菜单选项向下移动到“Inspect Element”并按 Enter
   • Hurray，徘徊的父母和所选孩子的CSS规则可用
4. 编辑规则。 （您可以移动鼠标来执行此操作;该项目将被取消，但其中包含:hover的CSS规则不会消失。）
5. 将鼠标悬停在元素上方以查看已更改的规则生效。

请注意，如果在步骤3中执行错误（如果使用鼠标），则必须先重新选择其他元素，然后再重试。

Answer 2

（Chrome 22）

在Elements面板中，右键单击.parent元素，然后在上下文菜单中选择Force Element State > :hover。瞧。

或者，您可以单击右侧Styles窗格标题中的“指向虚线矩形上的指针”按钮，然后选中/取消选中要在当前所选元素上强制使用的伪类。

现在可以强制元素状态在DOM树中的任何元素上，而不仅仅是当前选定的元素。

Answer 3

如果您打开开发工具并查看标题栏右侧的样式窗格Styles，则可以使用加号按钮添加自定义检查器样式表规则。这可能就是你要找的东西。