CSS無線電標籤如何工作？

Question

有人可以解釋代碼的最後部分是如何工作的？具體來說：

[type=radio]:checked { 
} 

[type=radio]:checked ~ .content { 
z-index: 1; 
} 

我剛剛開始使用CSS作爲newb，並希望嘗試創建一些交互式CSS選項卡;這導致我查看一些現有的代碼。不用說這讓我很困惑。

爲什麼需要[type=radio]:checked？它有括號內的z-index: 2;，但我把它拿出來，代碼仍然工作得很好;儘管當我嘗試刪除[type=radio]:checked時，代碼會中斷。爲什麼？目前它沒有任何屬性。

[type=radio]:checked ~ .content曾經是[type=radio]:checked ~ label ~ .content但我拿出標籤，它仍然正常工作。爲什麼需要它？

HTML：

<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#1 
     </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#2 
     </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#3 
     </div> 
    </div> 

</div> 
</html> 

CSS：

.tabs { 
    position: relative; 
    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 { 
} 

[type=radio]:checked ~ .content { 
z-index: 1; 
} 

Answer 1

你的CSS的最後一部分：

[type=radio]:checked { 
} 

[type=radio]:checked ~ .content { 
    z-index: 1; 
} 

這是給z-index到課程內容。由於只有一個選項卡被點擊，它只給出一個z-index只有一個內容類，並使其顯示。 （因爲沒有其他人有z-index）

如果你想看看它是如何工作的，然後添加一個z-index內容類，可以說10，在你的CSS和看它是如何得到所有扭曲。現在，由於該代碼僅提供了z-index: 1;，因此它無法正確顯示，因爲在此示例中它們都有10個。現在去上面的代碼snidbit並把z-index: 11;並觀察它是如何正確工作的。由於只有一個得到高的z-index: 11;它成爲顯示的一個。

如果您不知道[type=radio]:checked的含義是什麼，它就屬於該無線電輸入的活動狀態或點擊狀態。

這部分代碼：[type=radio]:checked ~ label ~ .content允許更加高貴和精確地選擇DOM元素。它將在沒有它的情況下工作，因爲.content低於radio標記。它只適用於1. input radio> 2. label> 3. .content。

如果你也不知道z-index是什麼，那麼讓我知道，我會制止。