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....

标签显示＆amp;突出显示所选选项卡应该通过以下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

将[ { "id": "1", "rep_id": "1", "target_id": "1", "brands_id": "1", "brand_name": "Combivent Respimat", "messages_id": "1", "message_text": "Dear [HCP Name], Thank you for taking the time to speak with me today. Based on our discussion, I’ve attached additional materials about COMBIVENT RESPIMAT. I look forward to speaking with you again in the near future.", "media": [ { "media_id": "1", "title": "Abbreviated Visual Aid", "description": "Provides information on key features of COMBIVENT RESPIMAT, including safety and efficacy information, the RESPIMAT Inhaler.", "thumbnail_url": "https://pdone.s3.amazonaws.com/thumbnail/abbreviated_vis_aid.png", "viewedAt": "2015-05-24 23:27:41" }, { "media_id": "2", "title": "Solutions Plus™ HCP Flashcard", "description": "Information about the Solutions Plus phone line that offers support services and education to both patients and HCPs.", "thumbnail_url": "https://pdone.s3.amazonaws.com/thumbnail/sp_flash_card.png", "viewedAt": "2015-05-24 23:27:42" }, { "media_id": "3", "title": "Solutions Plus™ Patient Flashcard", "description": "A detailed list of the services Solutions Plus offers to patients that you can print and give to patients together with a prescription for COMBIVENT RESPIMAT.", "thumbnail_url": "https://pdone.s3.amazonaws.com/thumbnail/sp_patient_card.png", "viewedAt": "0000-00-00 00:00:00" }, { "media_id": "4", "title": "Abbreviated Instructions for Use", "description": "A step-by-step patient guide listing the steps for COMBIVENT RESPIMAT preparation, priming, and dosing, with information on safety and important features of COMBIVENT RESPIMAT.", "thumbnail_url": "https://pdone.s3.amazonaws.com/thumbnail/patient_tearsheet.png", "viewedAt": "0000-00-00 00:00:00" }, { "media_id": "5", "title": "Patient Brochure", "description": "A patient-friendly starter guide to the safety, benefits, and use of COMBIVENT RESPIMAT.", "thumbnail_url": "https://pdone.s3.amazonaws.com/thumbnail/patient_brochure.png", "viewedAt": "0000-00-00 00:00:00" }, { "media_id": "6", "title": "RESPIMAT Inhaler Training Video", "description": "A step-by-step instructional video that details how to prepare, prime, and use the RESPIMAT Inhaler for daily dosing.", "thumbnail_url": "https://pdone.s3.amazonaws.com/thumbnail/ihi_video.png", "viewedAt": "0000-00-00 00:00:00" } ], "category": "REP", "createdAt": "2015-05-24 12:00:00", "openedAt": "2015-05-24 23:27:40", "viewedAt": "2015-05-24 22:54:08" }, { "id": "2", "rep_id": "1", "target_id": "1", "brands_id": "1", "brand_name": "Combivent Respimat", "messages_id": "5", "message_text": "I would like to schedule a live representative visit.", "media": [], "category": "TARGET", "createdAt": "2015-05-24 23:27:40", "openedAt": "0000-00-00 00:00:00", "viewedAt": "0000-00-00 00:00:00" } ]更改为CSS评论//The Magic并将/*The Magic*/更改为background: fff。排序了

感谢@misterManSam。

CSS +〜＆gt;组合器无法更改选项卡标签

1 个答案: