为什么hover会在CSS中的相应标签上触发输入？

Question

我错过了什么,或者这个例子的行为 - http://dabblet.com/result/gist/1716833 - 在Webkits/Fx中有点奇怪吗？

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

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

当你将label附件悬停input在input自身上时,会触发这种风格.甚至更多:label包含for和input包含在a 之间有区别label - 如果你input先将鼠标悬停在然后将光标直接移动到.target- 那么奇怪的悬停不会在包装版本中触发.

这只是在Firefox和Safari/Chrome中重现,但在Opera中没问题.

所以,问题是:如果在规范的某个地方描述了这个问题？我找不到任何适当的地方来描述它并告诉我们哪种行为是正确的.

Answer 1

这是现在的HTML规范; 直到2012年10月WD才将它添加到W3C HTML5(强调我的):

的:hover伪类定义"而用户以匹配的元素指定的元件用定点设备".出于:hover仅定义伪类的目的,HTML用户代理必须将元素视为用户指定的元素,如果它是:

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

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

• 一个元素,label它是当前匹配的元素的标记控件:hover.

生活规范中出现相同的文字.

几年前我在我的网站的联系表单的先前设计中发现了这种行为,其中label:hover也触发:hover任何表单输入元素,该元素是其后代或由其for属性引用.

实际上,这个行为实际上已经添加到了这个错误报告中的Gecko(Firefox的布局引擎)的最新版本以及这个(相当简短的)邮件列表线程,并且它在很多年前在WebKit中实现.如您所知,Opera中的行为不会重现; 看起来Opera Software和微软都没有收到备忘录.

我可以在规范中发现,可能涉及到这种行为在某种程度上是在这里,但我不(由我斜体注)肯定知道:

• 的:hover伪类适用,而用户指定用定点设备的元素,但并不必然激活它.例如,当光标(鼠标指针)悬停在元素生成的框上时,可视用户代理可以应用此伪类.

[...]

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

注意:如果' :hover'状态适用于元素,因为它的子节点由指针设备指定,则' :hover'可以应用于不在指针设备下面的元素.

但我可以得出的结论是,这种行为至少是Gecko和WebKit的设计.

关于你在这里所说的话:

甚至更多:label包含for和input包含在a 之间有区别label- 如果你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第一个复选框在悬停时始终为红色,因为更具体的规则始终优先.第二个复选框后跟a span.target,因此不适用此行为; 只有第二条规则才能生效,而光标位于span.target.