CSS + ~ > 组合器无法更改标签标签

Question

下面的代码用于创建标签：

<ul class="tabs">
<li>
  <input type="radio" name="tabs" id="tab1" checked />
  <label for="tab1">Campaigns</label>
  <div id="tab-content1" class="tab-content">
  ...Tab Contents....

并且选项卡显示和突出显示所选选项卡应该通过以下 CSS:

.tabs [id^="tab"]:checked + label { 
   top: 0;
   padding-top: 17px; 
   background: fff; 
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
   display: block;
}

然而，虽然选项卡选择和显示（第二个 CSS 声明）工作完美，但标签背景更改（第一个 CSS 声明）被完全忽略。

为什么组合器在选项卡选择方面工作得如梦似幻，但在标签格式方面却没有？请帮忙

编辑：完整的CSS代码如下：

.tabs {float: none;list-style: none;position: relative;margin-top: 20px;text-align: left;width: 100%;height: 274px;}
.tabs li {float: left;display: block}
.tabs input[type="radio"] {position: absolute;top: -9999px;left: -9999px}
.tabs label {display: block;padding: 14px 21px;border-radius: 10px 10px 0 0;font-size: 20px;font-weight: normal;background:#ccc;border:1px #fff solid;cursor: pointer;position: relative;top: 4px}
.tabs label:hover {background: #eee;border:1px #ccc solid;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}
.tabs .tab-content{z-index: 2;display: none;overflow: hidden;width: 100%;font-size: 17px;line-height: 25px;padding: 25px;position: absolute;top: 53px;left: 0;background: #fff;border-top:1px #ccc solid}
//The Magic
.tabs [id^="tab"]:checked + label { 
    top: 0;
    padding-top: 17px; 
    background: fff; 
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
    display: block;
}

Answer 1

将 //The Magic 更改为 CSS 评论 /*The Magic*/ 并将 background: fff 更改为 background: #fff。已排序

感谢@misterManSam。

CSS + ~ > 组合器无法更改标签标签

CSS + ~ > Combinators Not Working To Change Tab Label

html

css

combinators