CSS无线电选项卡如何工作？ [英] 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;
}

我刚开始使用CSS作为newb并想尝试创建一些交互式CSS选项卡;这导致我看看一些现有的代码。不必说，它让我很困惑。

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.

为什么 [type = radio]：checked 需要？它在括号中有 z-index：2; ，但我把它拿出来，代码仍然工作正常;虽然当我尝试和删除 [type = radio]：checked 所有在一起的代码中断。为什么？目前没有属性。

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 $ c> [type = radio]：checked〜label〜.content 但我拿出标签，它仍然可以正常工作。为什么需要它？

[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：

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

推荐答案

：

[type=radio]:checked  {
}

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

这是一个 z-index 到类内容。因为只有一个标签被点击，它给一个 z-index 只有一个内容类，并使其显示。 （因为没有其他人有 z-index ）

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)

如果你想看看它是如何工作的， code> z-index 到内容类，让我们说10，在你的CSS，看看它是如何得到所有的螺旋。现在由于该代码只给出一个 z-index：1; 它不能正确显示，因为在这个例子中它们都有10。现在去上面的snidbit代码，并放一个 z-index：11 ;并观察它如何正确工作。因为只有一个获得高 z-index：11; 它将成为显示的一个。

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.

t知道 [type = radio]：checked 意味着它与该无线电输入的活动状态或点击状态有关。

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.

这部分代码： [type = radio]：checked〜label〜.content 允许更加区分和精确地选择DOM元素。它将工作没有它，因为 .content 低于收音机标签。 > > > > c> .content 。

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.

如果你也不知道 z-index 然后让我知道，我会刹车下来。

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

这篇关于CSS无线电选项卡如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！