选中的元素编号：nth-​​child css rule

Question

我的页面和部分部分都有一些无线电按钮。

<input id="tab1" type="radio" name="responsive-tabs" class="responsive-select" checked>
<input id="tab2" type="radio" name="responsive-tabs" class="responsive-select">

<section id="content1">
some content
</section>

<section id="content2" >
some content
</section>

当选择第n个无线电按钮时，我需要看到第n个部分。 当然，使用jquery很容易实现，但我想只用css来做，所以请帮助我。现在我这样做

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

但我希望这个css规则更灵活，并且与元素数量无关。

Answer 1

您可以在现代浏览器上使用:target伪类（使用链接而不是无线电输入）实现相同的效果

  

示例 http://codepen.io/anon/pen/yHEIs

<强>标记

<a href="#content1">Tab1</a>
<a href="#content2">Tab2</a>
<a href="#content3">Tab3</a>

<section id="content1">
  some content 1
</section>

<section id="content2" >
  some content 2
</section>

<section id="content3" >
  some content 3
</section>

<强> CSS

section { display: none }
section:target { display: block; }

---

从简单的交叉浏览角度来看，:target伪类具有与:checked伪类相同的支持（自IE9以来都支持它们），但从功能的角度来看，使用锚点实现的选项卡面板即使在页面上没有应用CSS时（因为页面只是滚动到该部分）也可以更好地工作，并且您也可以将每个选项卡固定为永久链接（只需将哈希片段添加到网址中）

有关:target：MDN和CSS-Tricks

的更多信息