单选按钮组的选中属性css错误

Question

我使用类似以下的单选按钮技巧来制作选项卡：

HTML

<div class="tabs">
   <input type="radio" id="tab-1" name="tab-group-1" checked>
   <label for="tab-1">Tab One</label>
   <input type="radio" id="tab-2" name="tab-group-1">
   <label for="tab-2">Tab Two</label> 
</div>

然后是CSS：

.tabs label {
   margin-left: -1px;
   border: 1px solid;
   padding: 0px 80px 0px 80px;
   background: #ddd;
}

.tabs input[type=radio]:checked ~ .tabs label {
   background: #fff;
   border-bottom: 1px solid #fff;
}

在这里的问题是选中单选按钮时标签样式没有改变。有人可以帮我解释一下吗，谢谢。

顺便说一下：我使用IE 8运行代码。它支持checked属性吗？

- Tran Duy Linh

---

对于IE8，您需要使用 input[type=radio][checked]。 - Morpheus

Answer 1

请查看以下解决方案。将~替换为+。

.tabs label {
   margin-left: -1px;
   border: 1px solid;
   padding: 0px 80px 0px 80px;
   background: #ddd;
}

input[type="radio"]:checked + label {
   background: #fff;
   border-bottom: 1px solid #fff;
}

<div class="tabs">
    <input type="radio" id="tab-1" name="tab-group-1" checked>
   <label for="tab-1">Tab One</label>
       <input type="radio" id="tab-2" name="tab-group-1"/>
   <label for="tab-2">Tab Two</label> 
</div>

- ketan

---

还有一个问题，+ 和 ~ 之间有什么区别？ - Tran Duy Linh

@TranDuyLinh + 是用于选择下一个兄弟元素的符号，而 ~ 则是通用兄弟选择器。请参考 http://www.sitepoint.com/web-foundations/adjacent-sibling-selector-css-selector/ 和 http://www.sitepoint.com/web-foundations/general-sibling-selector-css-selector/。 - ketan

@TranDuyLinh IE8对伪类有部分支持。我认为你需要尝试使用selectivizr。 - ketan

Answer 2

删除波浪符号（~），并用加号（+）替换，以及 .tabs。

.tabs input[type=radio]:checked + label {

- Conrad Lotz

Answer 3

你也可以使用jQuery方法：

$('.tabs input[type="radio"]').click(function() {

   if($('#tab-1').is(':checked')) { 
       $('#tab-1').addClass("someClass")
   }

});

- Friendly Crook

---

我只想使用CSS和HTML。 - Tran Duy Linh