CSS - 类型标签的选择器？

Question

我正在使用这篇文章，它解释了如何为给定元素添加一个标签的选择器。不过，我想用它来选择给定类型（特别是单选按钮）的所有标签。尝试了以下代码：

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

并且

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

这个功能无法正常工作，我不确定自己做错了什么或者应该如何正确操作。请问有人能够向我解释解决方案吗？非常感谢！

- golmschenk

---

你能分享一下你的HTML代码吗？因为我认为应该是(label input[type="radio"])，一个JSFiddle会非常有帮助。 - Cam

我会这样做：http://jsfiddle.net/Ag3pt/ - karthikr

这个链接可能会回答你的问题。 - cyber_rookie

Answer 1

很遗憾，使用当前的CSS3选择器无法实现您想要的功能。

计划在CSS 4选择器中包含此功能，但该规范尚未最终确定，当然也没有在任何当前的浏览器中实现。

想法是创建一个选择器，它看起来像这样：

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

但这只是未来的事情，现在还不行。抱歉。

您可以在这里阅读相关内容：http://css4-selectors.com/selector/css4/reference-combination/

同时，如果您需要此类功能，您需要确保结构良好的HTML元素能够使用当前CSS选择器互相引用。

例如，如果它们紧挨着彼此，则可以使用以下内容：

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

那是目前为止你能得到的最接近的答案。

- Spudley

---

你的两个选择器都匹配了输入，而不是标签。此外，如果参考组合符仍然被排除在将用于CSS的快速选择器4配置文件之外，则可能无法在CSS中使用。 - BoltClock

Answer 2

您应该使用特殊的类来替代这些标签。您无法在CSS中基于其子元素的属性样式化父元素[目前]。

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

您的样式表应该如下所示：

你的样式表会说

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

- AbsoluteƵERØ

Answer 3

首先 - 修改

for属性只能与相应表单元素的id相关联，因此您误用了该属性来实现您想要的功能。 for的设计是将其绑定到表单中的一个特定元素。因此，代码应该如下所示：

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

因此，for不是仅用于检查type的解决方案。

其次 - 仅使用CSS的解决方案

只有在您的元素按以下方式排序时(label跟随input)，才可以使用纯CSS进行清理:

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

这样就能让 这段CSS选择:

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

如果不能这样做，那么我会采用AbsoluteƵERØ的方案，使用一个类。

- ScottS

Answer 4

你想做的事情是不可能的（仅使用CSS）。[attribute=value]语法通过检查该特定元素的属性值来工作。因此，for=[type="radio"]正在寻找类似于<label for='[type="radio"]'>的内容（如果语法有效的话）。

- Explosion Pills

---

很不幸。不过还是谢谢。 - golmschenk

[for=[type="radio"]] 不是有效的 - 值必须用引号 [for='[type="radio"]'] 或转义符 [for=\[type=\"radio\"\]] 进行引用才能有效。 （请注意，Jigsaw验证器无法处理转义版本，但它符合规范。） - BoltClock

Answer 5

试试这个：

input[type=radio]
{
CSS goes here
}

- StephenWidom

---

抱歉，我觉得你可能误解了我的问题。我想要选择“单选”元素的“标签”，而不是“单选”元素本身。 - golmschenk

是的，我刚意识到我误解了。抱歉。 - StephenWidom