2

有人可以解释代码的最后一部分是如何工作的吗？具体来说：

[type=radio]:checked  {
}

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

我刚从 CSS 作为新手开始，想尝试创建一些交互式 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;
}
4

1 回答 1

2

CSS 的最后一部分：

[type=radio]:checked  {
}

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

这是给z-index课堂内容的一个。由于只单击了一个选项卡，因此它只为z-index一个内容类提供了一个并使其显示。（因为没有其他人有z-index）

如果你想看看它是如何工作的，那么z-index在你的 CSS 中添加一个内容类，比如说 10，然后观察它是如何变得混乱的。现在，由于该代码仅给出 az-index: 1;它无法正确显示，因为在此示例中它们都有 10。现在转到上面的代码片段并放一个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告诉我，我会制止它。

于 2013-10-08T01:37:42.087 回答