假设我们有这种风格:

.parent .child { ... }

.parent:hover .child { ... }

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

Both selectors set style for child elements.

我想要编辑第二种样式.

What I would like is to edit the second style.

我点击 .parent 并在 Chrome 开发者工具中设置 :hover 状态单击 .child 元素以获取孩子的样式，但是... I click on .parent and set :hover state in Chrome developer tools Click on a .child element to get to child's style but...

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

When I click on .child the hover on parent is gone (because it's now set on .child).

虽然这在 Firebug 中有效，但我在 Chrome 中需要它...

铬 21.0.1180.89 米

Chrome 21.0.1180.89 m

推荐答案

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

Update: Chrome now has the following new hotness:

右键单击子元素并选择检查元素Chrome 将打开元素视图并选择项目

在元素视图中，右键单击父元素并选择强制元素状态 ▶ :hover"

In the Elements view, right-click the parent element and choose "Force Element State ▶ :hover"

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

Select the child element in the Elements view again.

以下是旧的、有效但令人讨厌的技术:

用这个JSFiddle测试:

悬停子元素本身(也悬停在父元素上).右键单击孩子.使用键盘(不是鼠标)将上下文菜单选择向下移动到检查元素"并按 EnterHurrah，悬停的父级和选定的子级的 CSS 规则可用 Hover the child element itself (which also hovers the parent). Right-click the child. Using the keyboard (not mouse) move the context menu selection down to "Inspect Element" and press Enter Hurrah, the CSS rule for the hovered parent and selected child is available

请注意，如果您在第 3 步中做错了(如果您使用鼠标)，则必须先选择不同的元素，然后再重试.

Note that if you do it wrong in step 3 (if you use the mouse) you have to select a different element first before trying again.