CSS 中的目标标签答案

【问题标题】：Target label in CSSCSS 中的目标标签
【发布时间】：2012-09-29 02:04:29
【问题描述】：

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

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

似乎不起作用，只是想知道还是这只是 jquery 的工作？

谢谢！

【问题讨论】：

【解决方案1】：

:target pseudo-class 不会像您认为的那样做，而且label 永远不能作为input 的后代存在，所以这行不通。

如果您尝试通过父系或for 属性来引用与input 相关联的label，则CSS3 无法实现。如果 label 是 input 之后的兄弟，则只能使用以下任一方式引用 label：

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

如果label 是祖先、前兄弟或完全在别处，则需要使用 jQuery 遍历 DOM 并定位它。

【讨论】：

你能举个例子说明你说的兄弟姐妹是什么意思吗？
@Matt: 类似<input type="text" id="i"><label for="i">Label directly following its input</label>，在输入标签之后有一个标签标签，没有一个包含另一个。
嗯我试过了，但似乎仍然没有工作......这是表单的一部分和 css -> pastebin.com/gdHY0xeH
@Matt：哦，对不起——我把:target 选择器放在那里了；根本不应该使用它。

【解决方案2】：

使用 CSS4，您可以做到这一点：

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

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

但是 CSS4 支持非常有限。不过，把它放在那里也没什么坏处。

【讨论】：

s/CSS4/Selectors 4/ 此外，引用组合子从[idref] 变为[id]，但不是相反，因此您将改为写!label /for/ input[type="text"]:focus。
但我很确定只有一个浏览器支持 CSS4..如果 :P 一半的浏览器还不支持所有的 CSS3。
看，这就是说“CSS4”的问题。没有 CSS4 这样的东西，任何浏览器都不可能永远支持 all 的 CSS3，因为它一直在增长，而且它不仅仅代表“所有3 级模块”，而是指从 CSS2 扩展而来的 CSS 的任何部分。但是，你知道，一切都是有代价的，这就是从全局调平系统 (CSS1,2) 突然转变为模块化系统 (> CSS2) 的代价。