如何使用CSS3添加另一個選項卡？

Question

我找到了一個CSS標籤的例子here; 我正在使用第三個例子「目標」。但是，當我嘗試添加第四個選項卡時，即使使用前3個（工作）選項卡，也會出現問題。我的嘗試是here;

我相信下面的原始CSS代碼需要調整，我不知道該如何理解;

/* Target Tabs */ 
.tabs-target span:nth-of-type(1):not(:target) ~ span:nth-of-type(2):not(:target) ~ .tab:nth-of-type(1), 
.tabs-target span:nth-of-type(2):target ~ .tab:nth-of-type(2), 
.tabs-target span:nth-of-type(1):target ~ .tab:nth-of-type(3) 
{ 
    display: block; 
} 

我需要調整什麼才能讓FOURTH選項卡正常工作？

Answer 1

這工作：

.tabs-target span:nth-of-type(1):not(:target) ~ span:nth-of-type(2):not(:target) ~ span:nth-of-type(3):not(:target) ~ span:nth-of-type(4):not(:target) ~ .tab:nth-of-type(1), 
.tabs-target span:nth-of-type(4):target ~ .tab:nth-of-type(1), 
.tabs-target span:nth-of-type(3):target ~ .tab:nth-of-type(2), 
.tabs-target span:nth-of-type(2):target ~ .tab:nth-of-type(3), 
.tabs-target span:nth-of-type(1):target ~ .tab:nth-of-type(4) { 
     display: block; 
} 

樣品fiddle

Answer 2

通過這個你可以通過剛剛在HTML

加入

HTML

<div class="tabs"> 

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

     <div class="content"> 
      Tab One 
     </div> 
    </div> 

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

     <div class="content"> 
      Tab Two 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-3" name="tab-group-1"> 
     <label for="tab-3">Tab Three</label> 

     <div class="content"> 
      Tab Three 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-4" name="tab-group-1"> 
     <label for="tab-4">Tab Four</label> 

     <div class="content"> 
      Tab Four 
     </div> 
    </div> 


</div> 

<添加任何數目的標籤 - 添加更多選項卡只需複製.... f ully並相應地改變其價值。 - >

CSS

.tabs { 
    position: relative; 
    min-height: 200px; /* This part sucks */ 
    clear: both; 
    margin: 25px 0; 
} 
.tab { 
    float: left; 
} 
.tab label { 
    background: #eee; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative; 
    left: 1px; 
} 
.tab [type=radio] { 
    display: none; 
} 
.content { 
    position: absolute; 
    top: 28px; 
    left: 0; 
    background: white; 
    right: 0; 
    bottom: 0; 
    padding: 20px; 
    border: 1px solid #ccc; 
} 
[type=radio]:checked ~ label { 
    background: white; 
    border-bottom: 1px solid white; 
    z-index: 2; 
} 
[type=radio]:checked ~ label ~ .content { 
    z-index: 1; 
} 

DEMO