：目標僞選擇器和標籤

Question

所以我想創建一個只使用CSS的標籤系統。

我到目前爲止的工作，但我不知道如何使一個標籤默認可見。

的標籤：

<section class="tabs"> 

    <ul> 
    <li><a href="#tab1">1</a></li> 
    <li><a href="#tab2">2</a></li> 
    <li><a href="#tab3">3</a></li> 
    </ul> 

    <section id="tab1"> content for 1... </section> 
    <section id="tab2"> content for 2... </section> 
    <section id="tab3"> content for 3... </section> 

</section> 

和CSS（最重要的部分）：

.tabs section{ 
display: none; 
} 

.tabs section:target{ 
display: block; 
} 

所以我如果我設置了section:first-child阻止（第一個選項卡應該是默認的可見），那麼我會得到兩個可見部分，如果網址中存在錨點：第一個標籤和目標標籤...

我該如何克服這個問題？

Answer 1

好吧，如果你讓你的默認的最後一個標籤（section:last-child），那麼我認爲這可能是工作：

.tabs section, 
.tabs section:target ~ section { 
    display: none; 
} 

使用一般兄弟選擇~要求元素在它前面的目標的兄弟姐妹，所以因此請求last-child而不是first-child的原因。

編輯：11-12-2011，我確實找到了一種方法，讓您將a標籤標記爲活動標籤！假設它符合您的特定應用程序。這裏是概念證明一些簡單的修改後的代碼（僅在FF測試）：

HTML

<section class="tabs"> 
    <ul class="nav"> 
    <li><a href="#tab1">1</a></li> 
    <li><a href="#tab2">2</a></li> 
    <li><a href="#tab3">3</a></li> 
    </ul> 


    <section id="tab2"><div class="tabActive"></div> content for 2... </section> 
    <section id="tab3"><div class="tabActive"></div> content for 3... </section> 
    <section id="tab1"><div class="tabActive"></div> content for 1... </section> 

</section> 

CSS

.nav { 
    position: relative; 
    z-index: 2; 
    margin: 10px .5em 0; 
} 
.nav li { 
    padding: .5em; 
    width: 2em; 
    text-align: center; 
    float: left; 
} 

.tabs section, 
.tabs section:target ~ section { 
    display: none; 
} 

.tabs section:target, 
.tabs section:last-child { 
    display: block; 
    clear: left; 
    margin: 0 .5em; 
    min-width: 300px; /* for show only */ 
    min-height: 200px; /* for show only */ 
    border: 1px solid black; 
    position: relative; 
    z-index: 1; 
    padding: 10px; 
} 

.tabActive { /* set for tab 1 */ 
    width: 2em; 
    height: 2em; 
    position: absolute; 
    top: -2em; 
    left: .5em; 
    border: 1px solid black; 
    border-bottom: transparent; 
    background-color: inherit; 
    margin-top: -1px; /* top border height */ 
    margin-left: -1px; /* left border width */ 
} 

#tab1 {background-color: cyan;} 
#tab2 {background-color: yellow;} 
#tab3 {background-color: pink;} 

#tab2 .tabActive {left: 3.5em;} 
#tab3 .tabActive {left: 6.5em;}