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的支持是極其有限的。不過，把它放在那裏並沒有什麼壞處。