有一个带有标签的输入和以下选择器：
input:hover + .target {
background: red;
}
当您将鼠标悬停在输入的标签上时,不仅仅是输入本身,触发了这种风格.更重要的是：标签与for和输入包装在标签之间有区别 – 如果您首先悬停输入,然后将光标直接移动到.target – 奇怪的悬停将不会在包装版本中触发.
而这只是在Firefox和Safari / Chrome中再现,但在Opera中是可以的.
所以,问题是：如果这个问题在规范的某个地方被描述？我找不到任何适当的地方描述它,并告诉什么行为是正确的.
解决方法
这个行为实际上是添加到this bug report中的最新版本的Gecko(Firefox的布局引擎)以及this (rather short) mailing list thread,并在WebKit many years back中实现.正如您所注意到的,Opera中不会重现行为;看来Opera软件和Microsoft没有获得备忘录.
所有我可以在规范中找到可能与这个行为有关的东西是here,但我不知道(我的斜体注)：
- The
:hoverpseudo-class applies while the user designates an element with a pointing device,but does not necessarily activate it. For example,a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a Box generated by the element.[…]
Selectors doesn’t define if the parent of an element that is ‘
:active’ or ‘:hover’ is also in that state. [It does not appear to define the same for the child of an element either.]Note: If the ‘
:hover’ state applies to an element because its child is designated by a pointing device,then it’s possible for ‘:hover’ to apply to an element that is not underneath the pointing device.但是我可以得出结论,这种行为至少在Gecko和WebKit中是设计的.
关于你在这里说的话
Even more: there is a difference between the
labelwithforandinputwrapped in alabel— if you’d hover theinputat first and then move the cursor straight to the.target— the strange hover won’t trigger in wrapped version.鉴于上述的行为,这里唯一的可能性就是您已经被级联咬伤了.
基本上这个规则：
/* 1 type,1 pseudo-class,1 class -> specificity = (0,2,1) */ input:hover + .target { background: red; }比这个规则更具体：
/* 1 class,1 pseudo-class -> specificity = (0,0) */ .target:hover { background: lime; }因此,在适用的浏览器中,您的第一个复选框的label.target将永远是悬停的红色,因为更具体的规则始终优先.第二个复选框后面是一个span.target,所以这个行为都不适用;当光标在span.target上方时,只有第二条规则可以生效.
