How do CSS radio tabs work?

问题

Could someone explain how the last part of the code works? Specifically:

[type=radio]:checked  {
}

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

I'm just starting with CSS as a newb and wanted to try to create some interactive CSS tabs; which lead me to look at some existing code out there. Needless to say it has left me quite confused.

Why is [type=radio]:checked needed? It had z-index: 2; inside the brackets but I took that out and the code still works just fine; although when I try and delete [type=radio]:checked all together the code breaks. Why? It has no properties currently.

[type=radio]:checked ~ .content used to be [type=radio]:checked ~ label ~ .content but I took out label and it still works fine. Why was it ever needed?

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;
}

回答1:

The last part of your CSS:

[type=radio]:checked  {
}

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

This is giving a z-index to the class content. Since only one tab is clicked it is giving a z-index to only one content class and that makes it display. (Since no others have a z-index)

If you want to see how it works then add a z-index to the content class, lets say 10, in your CSS and watch how it gets all screwy. Now since that code is only giving a z-index: 1; it doesn't display correctly since they all have 10 in this example. Now go to the above snidbit of code and put a z-index: 11; and watch how it works correctly. Since only one gets a high z-index: 11; it becomes the displaying one.

If you don't know what the [type=radio]:checked means, it is pertaining to an active state or clicked state for that radio input.

This part of code: [type=radio]:checked ~ label ~ .content is allowing a more distinguished and precise selection of a DOM element. It will work without it because .content is below the radio tag. It will only apply to an element that is 1. input radio > 2. label > 3. .content.

If you also don't know what z-index does then let me know and I'll brake that down.

来源：https://stackoverflow.com/questions/19237560/how-do-css-radio-tabs-work

标签

html

css

tabs

radio-button