CSS - 类型标签的选择器？

Question

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

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

和

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

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

Answer 1

不幸的是，使用当前的CSS3选择器无法完成您想要的任务。

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

这个想法适用于看起来像这样的选择器：

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

但这是为了未来，而不是现在。遗憾。

您可以在此处阅读：http://css4-selectors.com/selector/css4/reference-combination/

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

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

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

这就像你现在所能得到的那样接近。

Answer 2

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

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

你的样式表会说

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

Answer 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>

然后允许this css to select：

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

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

Answer 4

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

Answer 5

试试这个：

input[type=radio]
{
CSS goes here
}