为什么CSS中的相应标签会触发输入的悬停？

Question

我是否遗漏了某些内容，或者此示例的行为 - http://dabblet.com/result/gist/1716833 -在Webkits/Fx中比较奇怪？

有一个带有标签的输入和以下选择器：

input:hover + .target {
    background: red;
}

当您将鼠标悬停附加到 input 的 label 时，不仅会触发 input，还会触发此样式> 本身。更重要的是：带有 for 的 label 和包裹在 label 中的 input 之间存在差异 - 如果您'首先将鼠标悬停在 input 上，然后将光标直接移动到 .target - 奇怪的悬停在包装版本中不会触发。

这只能在 Firefox 和 Safari/Chrome 中重现，但在 Opera 中没问题。

所以，问题是：规范中是否描述了这个问题？我找不到任何合适的地方来描述它并告诉我们什么行为是正确的。

Answer 1

现在这已包含在 HTML 规范中；直到2012 年 10 月 WD 它已添加到 W3C HTML5（强调我的）：

:hover 伪类被定义为匹配“当用户使用指点设备指定元素时”的元素。仅出于定义 :hover 伪类的目的，HTML 用户代理必须将某个元素视为用户指定的元素，如果它是：

• 用户使用指点设备指示的元素。

• 具有用户使用指点设备指示的后代的元素。

• 作为当前匹配 :hover 的 label 元素的带标签控件的元素。

相同的文本出现在 生活规范。

---

几年前，我在网站联系表单的先前设计中发现了这种行为，其中 label:hover 还会在任何表单输入元素（无论是其表单输入元素）上触发 :hover后代或由其 for 属性引用。

此行为实际上已添加到此错误报告<的最新版本的 Gecko（Firefox 布局引擎）中/a> 以及 这个（相当短的）邮件列表线程，它是在 WebKit 中实现的 很多年前。正如您所注意到的，这种行为不会在 Opera 中重现； Opera Software 和微软似乎没有收到这份备忘录。

我在规范中可以找到的所有可能与此行为相关的内容是

• :hover 伪类在用户用指点设备指定元素时应用，但不一定激活它。例如，当光标（鼠标指针）悬停在元素生成的框上时，可视用户代理可以应用此伪类。

[...]

选择器不定义“:active”或“:hover”元素的父元素是否也处于该状态。 [它似乎也没有为元素的子元素定义相同的内容。]

<块引用>

注意：如果“:hover”状态适用于某个元素，因为它的子元素是由指针设备指定的，那么“:hover”状态是可能的' 以应用于不在指点设备下方的元素。

但我可以得出的结论是，这种行为至少在 Gecko 和 WebKit 中是设计使然的。

---

关于你在这里所说的：

更重要的是：带有 for 的 label 和包裹在 label 中的 input 之间存在差异 —如果您首先将鼠标悬停在 input 上，然后将光标直接移动到 .target - 奇怪的悬停在包装版本中不会触发。

鉴于上述行为，唯一的可能性是您只是被级联咬伤了。

基本上，这条规则：

/* 1 type, 1 pseudo-class, 1 class -> specificity = (0, 2, 1) */
input:hover + .target {
    background: red;
}

比这条规则更具体：

/* 1 class, 1 pseudo-class         -> specificity = (0, 2, 0) */
.target:hover {
    background: lime;
}

因此，在适用的浏览器中，第一个复选框的 label.target 在悬停时将始终为红色，因为更具体的规则始终优先。第二个复选框后面跟着一个 span.target，因此此行为均不适用；当光标位于 span.target 上时，只有第二条规则才能生效。