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

Question

假设我们有这种风格：

.parent .child { ... }

.parent:hover .child { ... }

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

我想要的是编辑第二种样式。

1. 我在 Chrome 开发者工具中点击.parent并设置状态:hover
2. 单击一个.child元素以获取孩子的样式，但是...

当我点击.child父鼠标悬停时消失了（因为它现在设置为.child）。

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

铬 21.0.1180.89 m

Answer 1

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

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

2. 在 Elements 视图中，右键单击父元素并选择“Force Element State ▶ :hover”
   

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

---

旧的、有效但令人讨厌的技术如下：

用这个 JSFiddle测试：

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

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

Answer 2

（铬 22）

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

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

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

Answer 3

当您打开开发工具并查看标题栏右侧的样式窗格时Styles，会出现一个加号按钮，您可以在其中添加自定义检查器样式表规则。这可能是您正在寻找的。