css - 在选中的单选按钮上更改不透明度

Question

我有这个html：

<label class="fakeRadio active">
   <input type="radio">
</label>

这是我的CSS：

.fakeRadio input[type=radio]:checked  + .fakeRadio.active {
    opacity:0.5;
}

由于某种原因，fakeRadio 活动类没有得到不透明度，知道为什么吗？

Answer 1

将您的 CSS 更改为

.fakeRadio input[type=radio]:checked, .fakeRadio.active {
    opacity:0.5;
}

演示http://jsfiddle.net/kevinPHPkevin/mwNFD/

如果您只想更改标签，请执行此操作

演示http://jsfiddle.net/kevinPHPkevin/mwNFD/

<input type="radio">
<label class="fakeRadio active">
   Label text
</label>



input[type="radio"]:checked +label {
    opacity:0.5;
}

Answer 2

您正在尝试使用 CSS 级别 4 和父选择器

在这里阅读更多http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/

E! > F  an E element parent of an F element

http://www.w3.org/TR/selectors4/#subject

更好地使用这个

  <input id=myInput type="radio">
  <label for="myInput" class="fakeRadio active"> </label>

的CSS：

.fakeRadio input[type=radio] + label[for=myInput] {
        margin-left:-4px;
    }

.fakeRadio input[type=radio]:checked + label[for=myInput] {
    opacity:0.5;
}