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:

Однако, несмотря на то, что выбор и отображение вкладок (2-я декларация CSS) отлично работает, изменение фона метки (1-я декларация CSS) полностью игнорируется.

Почему комбинатор работает как сон для выбора вкладки, но не для форматирования ярлыков? Помогите пожалуйста

Edit: Полный код 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.