CSS中的目标标签

Question

有没有办法在css3中为输入定位标签？例如，我尝试了这种方法 -

input[type="text"]:focus label:target {
    color:orange !important;
}

似乎没有用，只是想知道或者这只是jquery的工作吗？

谢谢！

Answer 1

:target pseudo-class没有按照您的想法执行，label永远不会作为input的后代存在，因此无效。

如果您尝试通过parentage或label属性引用与input相关联的for，则CSS3无法做到这一点。您只能引用label，如果它是input之后的兄弟，请使用其中任何一个：

input[type="text"]:focus + label
input[type="text"]:focus ~ label

如果label是祖先，兄弟之前或其他地方，你需要使用jQuery来遍历DOM并找到它。

Answer 2

使用CSS4，你可以这样做：

!label /for/ input[type="text"]:focus,
!label input[type="text"]:focus {
    ...
}

第一个允许<label for="inputid">，第二个允许<label><input type="text"/></label>

然而，CSS4支持非常有限。把它放在那里也没什么坏处。