css可见性 选项卡

CSS的可见性属性非常有用，比如我们可以用它来实现一个选项卡效果。

首先，我们需要给每个选项卡添加一个唯一的ID，比如：

<ul>
  <li id="tab1">选项卡1</li>
  <li id="tab2">选项卡2</li>
  <li id="tab3">选项卡3</li>
</ul>

然后，我们可以用CSS来控制选项卡的显示和隐藏，比如：

/* 隐藏所有选项卡内容 */
#tab1-content,#tab2-content,#tab3-content {
  display: none;
}

/* 显示当前选项卡内容 */
#tab1:checked ~ #tab1-content,#tab2:checked ~ #tab2-content,#tab3:checked ~ #tab3-content {
  display: block;
}

/* 点击选项卡切换 */
li {
  display: inline-block;
  background-color: #ccc;
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
}

li:hover {
  background-color: #ddd;
}

input[type="radio"] {
  display: none;
}

其中，我们用来作为选项卡的切换按钮，每个按钮对应一个选项卡的ID。当按钮被选中时，对应的选项卡内容会显示出来。

通过这样的方式，我们就可以很方便地实现选项卡效果了。