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）

如果你想看看它是如何工作的，那么在你的CSS中添加一个z-index到内容类，比方说10，并观察它是如何变得棘手的。现在，因为该代码仅提供z-index: 1;，所以它没有正确显示，因为在这个例子中它们都有10个。现在转到上面的代码并放一个z-index: 11;并观察它是如何正常工作的。由于只有一个获得高z-index: 11;，因此它成为显示的一个。

如果您不知道[type=radio]:checked的含义，则与该无线电输入的活动状态或点击状态有关。

这段代码：[type=radio]:checked ~ label ~ .content允许更精确地选择DOM元素。没有它会有效，因为.content低于radio标记。它仅适用于1. input radio＆gt;元素。 2. label＆gt; 3. .content。

如果你也不知道z-index做了什么，那就让我知道吧，我会把它制造下来。

CSS无线电标签如何工作？

1 个答案: