html - 此 CSS 不适用于单选按钮选择

Question

在接下来的 jsfiddle 中，我试图通过仅使用 CSS 来更改两个(或更多)不同单选组的选定单选按钮的颜色。我遗漏了一些我不知道的东西。

http://jsfiddle.net/2nxnk/1/

代码:

<input type="radio" name="group0" value="1" /> One
<input type="radio" name="group0" value="2" /> Two
<input type="radio" name="group0" value="3" /> Three
<p>
<input type="radio" name="group1" value="4" /> Four
<input type="radio" name="group1" value="5" /> Five
<input type="radio" name="group1" value="6" /> Six

CSS:

input[type="radio"]:checked{ color: green; } 

除非没有其他办法，否则我不想使用任何 jquery。请多多指教。

编辑:我决定编辑问题:我想更改“单选按钮文本”的颜色。其次，如果唯一的用途是更改文本颜色，我不想用 ID 弄乱 html 页面。我现在的问题是:1. 是使用标签的唯一方式吗？2. 似乎使用 ID，您可以获得不同颜色的不同 radio 组(再次文本)的能力。那是对的吗？3. 最后也许是一个简单的问题:我虽然只有javascript捕获页面上的 Action ，但是当没有javascript时CSS如何触发效果？

感谢大家的帮助，我还改进了最后一个为单选按钮图像本身着色的示例。

Answer 1

如果你想改变单选按钮旁边的文字，你可以这样做

HTML

<input type="radio" name="group0" value="1" /><label>One</label>
<input type="radio" name="group0" value="2" /><label>Two</label> 
<input type="radio" name="group0" value="3" /><label>Three</label> 
<p>
<input type="radio" name="group1" value="4" /><label>Four</label> 
<input type="radio" name="group1" value="5" /><label>Five</label> 
<input type="radio" name="group1" value="6" /><label>Six</label>

CSS

input[type="radio"]:checked + label {
    color: green;
}

Fiddle

可能伪元素可以提供一点帮助:-

input[type="radio"]:checked +label {
    color: green;
  }

input[type="radio"]:checked:before
{
 content:'.';
 position:relative;
 display:inline-block;
 background-color:green;
 width:12px;
 opacity:.3;
 top:-1px;
 border-radius:10px;
 -moz-border-radius:10px;
}

Fiddle