html - 如何将此 ID 选择器重写为类或通用选择器？

Question

以下选择器允许我显示四个选项卡，但我想要显示 5、6 等的通用代码。是否有另一种方法可以为任意数量的选项卡编写此 CSS 代码？ (我更喜欢纯 CSS 解决方案)。

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}

  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Codepen</label>
    
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Dribbble</label>
    
  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Dropbox</label>
    
  <input id="tab4" type="radio" name="tabs">
  <label for="tab4">Drupal</label>
  
   <input id="tab5" type="radio" name="tabs">
  <label for="tab5">Drupal</label>

这是一个JSFiddle带有完整的演示。

Answer 1

您可以稍微重写您的 html 以实现此目的:

<input id="tab1" type="radio" name="tabs" class="tabs-radio" checked>
<label for="tab1">Codepen</label>
<section id="content1" class="tabs-content">
....
</section>
<input id="tab2" type="radio" name="tabs" class="tabs-radio">
....

然后你可以简单地做:

.tabs-radio:checked + * + .tabs-content {
  display: block;
}

唯一的问题是标签/ block 的定位:其中之一应该是绝对定位