CSS只用輸入標籤：檢查

Question

我發現this example（以下簡稱「檢查」版本）和它的作品：

http://jsfiddle.net/2cTwA/

但我想包裝容器元素內部的輸入和標籤（如nav） ，如果我做的標籤停止工作:(

對此有任何解決方案

找到解決辦法：http://jsfiddle.net/2cTwA/7/

Answer 1

有輕微的HTML和CSS修改 - DEMO

CSS

input { display: none; } 

nav { overflow: hidden } 
label { float: left; display: inline-block; padding: 5px 10px; } 
label a { color: #d33; text-decoration: underline; cursor: pointer; } 

.tab { display: none; border: 1px solid #333; padding: 10px; } 
a[name="tab1"] + .tab { display: block } 
:target + .tab { display: block } 
:target ~ a[name="tab1"] + .tab { display: none } 

HTML

<section class="tab-area tabs-checked"> 

    <nav> 
     <input checked type="radio" name="tab" id="tab-A" /> 
     <input type="radio" name="tab" id="tab-B" /> 
     <input type="radio" name="tab" id="tab-C" /> 

     <label class="tab-link" for="tab-A"><a href="#tab1">Tab 1</a></label> 
     <label class="tab-link" for="tab-B"><a href="#tab2">Tab 2</a></label> 
     <label class="tab-link" for="tab-C"><a href="#tab3">Tab 3</a></label> 
    </nav> 

    <a name="tab3"></a> 
    <article class="tab"> 
     <h3>Tab 3</h3>   
    </article> 

    <a name="tab2"></a> 
    <article class="tab"> 
     <h3>Tab 2</h3> 
    </article>  

    <a name="tab1"></a> 
    <article class="tab"> 
     <h3>Tab 1.</h3> 
    </article> 

</section> 

Answer 2

您正在使用兄弟選擇器（〜），並且使用包含nav的元素，您將刪除輸入和標籤以避免成爲文章的兄弟。

你只需要重寫你的CSS你在哪裏使用代字號。

Answer 3

這裏使用CSS只

.tabs { 

    input[type=radio] { 
    display: none; 

    @for $i from 1 through 12 { 

     &:nth-of-type(#{$i}):checked ~ .content .tab:nth-child(#{$i}) { 
     display: block; 
     } 
    } 
    } 

    label { 
    cursor: pointer; 
    display: inline-block; 
    } 

    .tab { 
    display: none; 
    } 
} 

這裏12（最大值）選項卡中的青菜例子是HTML標記

<div class="tabs"> 
    <input name="controls" type="radio" id="controls-tab" checked="true"/> 
    <label for="controls-tab">controls</label> 
    <input name="controls" type="radio" id="panels-tab"/> 
    <label for="panels-tab">panels</label> 
    <input name="controls" type="radio" id="readme-tab"/> 
    <label for="readme-tab">readme</label> 
    <div class="content"> 
     <div class="tab"> 
     </div> 
     <div class="tab"> 
     </div> 
     <div class="tab"> 
     </div> 
    </div> 
    </div> 

無需相對位置的div標籤裏面的內容股利。無需設置內容高度。