CSS - 类型标签的选择器？答案

【问题标题】：CSS - Selector of label for type?CSS - 类型标签的选择器？
【发布时间】：2013-05-07 18:10:36
【问题描述】：

我正在使用this post 解释如何为给定元素添加标签选择器。但是，我想用它来选择给定类型（特别是收音机类型）的所有标签。尝试：

label[for=input[type="radio"]] {
    /* Styles */
}

和

label[for=[type="radio"]] {
    /* Styles */
}

不起作用，我不确定我做错了什么或如何做对。有人可以向我解释解决方案吗？非常感谢！

【问题讨论】：

你能分享你的html吗？因为我相信它应该是（ label input[type="radio"] ）一个 jsfiddle 会有很大帮助。
我会这样做：jsfiddle.net/Ag3pt
[This][1] 可能会回答您的问题。 [1]：stackoverflow.com/questions/13031926/select-label-by-input-type

【解决方案1】：

很遗憾，使用当前的 CSS3 选择器无法完成您想要的操作。

有计划将此功能包含在 CSS 4 级选择器中，但此规范尚未最终确定，并且肯定不会在任何当前浏览器中实现。

这个想法是一个看起来像这样的选择器：

label /for/ [type="radio"] {
    /* styles */
}

但那是为了未来，而不是现在。对不起。

同时，如果你需要这种东西，你需要确保你的 HTML 结构使得元素可以使用当前的 CSS 选择器相互引用。

例如，如果它们彼此相邻，您可以这样使用：

label + input[type="radio"] { .... }

暂时就这么接近了。

【讨论】：

你的两个选择器都匹配输入，而不是标签。此外，如果引用组合器仍被排除在要在 CSS 中使用的快速 Selectors 4 配置文件中，则它可能无法在 CSS 中使用。

【解决方案2】：

您应该为这些标签使用特殊的类。 [目前]，您不能根据子元素在 CSS 中的属性设置父元素的样式。

<label class='radio'><input type='radio'></label>

你的样式表会说

label.radio{
  /* add styles here */
}

【讨论】：

【解决方案3】：

首先 - 更正

for 属性 is only to be tied to an id of the form element it is associated with，因此您正在滥用该属性来执行您想要做的事情。 for 的设计是将其绑定到表单中的一个特定元素。所以是这样的：

<label for="RadioChk">My Radio Button</label><input id="RadioChk" type="radio" />

所以for 不是仅检查type 的解决方案。

第二个 - 唯一的纯 CSS 解决方案

使用纯 CSS 完成的唯一干净方法是，如果您的元素是这样排序的（label 遵循 input）：

<input type="radio" /><label>My Radio Button</label>

input[type=radio] + label {
    /* styles */
}

如果做不到，那么我会选择 AbsoluteƵERØ 的使用类的解决方案。

【讨论】：

【解决方案4】：

您尝试做的事情是不可能的（无论如何仅使用 CSS）。 [attribute=value] 语法通过检查特定元素的属性值来工作。因此，for=[type="radio"]] 正在寻找类似<label for='[type="radio"]'> 的东西（如果语法甚至是有效的）。

【讨论】：

这很不幸。不过还是谢谢。
[for=[type="radio"]] 无效 - 必须引用 [for='[type="radio"]'] 或转义 [for=\[type=\"radio\"\]] 才能使其有效。（请注意，Jigsaw 验证器在转义版本上会阻塞，但它在规范中是有效的。）

【解决方案5】：

试试这个：

input[type=radio]
{
CSS goes here
}

【讨论】：