Html 如何将此ID选择器重写为类选择器或常规选择器？

下面的选择器允许我显示四个选项卡，但我想要一个显示5、6和更多选项卡的通用代码。有没有其他方法可以为任意数量的选项卡编写CSS代码？（我更喜欢只使用CSS的解决方案）

#表1：选中~#内容1，
#表2：选中~#内容2，
#表3：选中~#内容3，
#表4：选中~#内容4{
显示：块；
}

代码笔
运球
升降箱
猪跑
Drupal

您可以稍微重写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">
....

---

唯一的问题是标签/块的定位：其中一个应该绝对定位

虽然你说JS并不理想，但我想我会发布一个JS解决方案让你看看，因为你说如果需要的话你会求助于它

函数contentShow（）{
var tabs=document.getElementsByTagName（“输入”）；
对于（变量i=0；i

*，*：之前，*：之后{
保证金：0；
填充：0；
框大小：边框框；
}
html，正文{
身高：100%；
}
身体{
字体：14px/1“开放式Sans”，无衬线；
颜色：#555；
背景：#eee；
}
h1{
填充：50px0；
字体大小：400；
文本对齐：居中；
}
p{
利润率：0.20px；
线高：1.5；
}
主要{
最小宽度：640px；
最大宽度：1600px；
填充：50px；
保证金：0自动；
背景：#fff；
}
部分{
显示：无；
填充：20px0；
边框顶部：1px实心#ddd；
}
输入{
显示：无；
}
标签{
显示：内联块；
利润率：0-1px；
填充：15px 25px；
字号：600；
文本对齐：居中；
颜色：#bbb；
边框：1px实心透明；
}
标签：之前{
字体系列：Fontsome；
字体大小：正常；
右边距：10px；
}
/*标签[for*='1']：在{content:'\f1cb'；}之前
标签[for*='2']：在{content:'\f17d'；}之前
标签[for*='3']：在{content:'\f16b'；}之前
标签[for*='4']：在{content:'\f1a9'；}之前*/
标签：悬停{
颜色：#888；
光标：指针；
}
输入：选中+标签{
颜色：#555；
边框：1px实心#ddd；
边框顶部：2件纯色橙色；
边框底部：1px实心#fff；
}
@媒体屏幕和屏幕（最大宽度：650px）{
/*标签{
字号：0；
}
标签：之前{
保证金：0；
字号：18px；
}
}*/
@媒体屏幕和屏幕（最大宽度：400px）{
标签{
填充：15px；
}
}

响应CSS选项卡 表1 表2 表3 表4 表5 表6 表7 表8 表9 内容1

内容2

内容3

内容4

内容5

内容6

内容7

内容8

内容9

---

Hmmmm，我可能完全错了，但我认为如果没有JavaScript，这是不可能的。。。你为什么不能使用JS？因为我认为我的页面可以通过完整的css解决方案更快地加载，如果我没有解决方案，我会使用javascript，但如果可能的话，我想要一个完整的css…Vanilla JS非常快，我可以想出几种使用它的方法，这将是一个很好的解决方案。。。我真诚地怀疑你是否会注意到对速度的影响。就像我说的，我不认为这仅在CSS中是可能的…你必须手动添加所有内容。像LESS/SCSS这样的CSS预处理器是一个选项吗？您可以编写一个

mixin

来迭代构建n个级别。它不是超级干净，但它不会涉及在页面上使用JS。但它应该是可移植到更少的，只需很少的努力。

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