按值 css 定位单选按钮

Question

我有一些 HTML，如：

<input type="radio" value="red" id="color" name="attribute_color">
<input type="radio" value="blue" id="color" name="attribute_color">
<input type="radio" value="green" id="color" name="attribute_color">

如何在不添加任何 ID 或类的情况下定位不同的输入？我可以按价值定位吗？

Answer 1

是的，您可以像这样定义 css 规则：

input[value="red"] {
   /* style for red radio */
}

input[value="green"] {
   /* style for green radio */
}

input[value="blue"] {
   /* style for blue radio */
}

属性选择器适用于所有浏览器和 IE7+