CSS中的目标标签

Question

有没有一种可能的方式来定位css3中输入的标签？比如这个方法我试过 -

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

似乎不工作，只是想知道，或者这是一个只工作jQuery的？

谢谢！

Answer 1

​​不会做你认为它所做的事情，并且label永远不可能作为input的后代存在，所以不起作用。

如果您试图通过亲子关系或for属性引用与input关联的label，那么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的支持是极其有限的。不过，把它放在那里并没有什么坏处。