Код ниже используется для создания вкладок:
<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;
}
Однако, хотя выбор и отображение вкладок (2-е объявление CSS) работает отлично, изменение фона метки (1-е объявление 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;
}
background: fff;
должно бытьbackground: #fff;
отсутствие хеша. - person misterManSam   schedule 27.05.2015//The Magic
на комментарии CSS/*The Magic*/
и изменитеbackground: fff
наbackground: #fff
. Это просто опечатка и неправильный тип комментария! - person misterManSam   schedule 27.05.2015