在 :nth-child css 规则中检查元素编号

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-th radiobutton选择时，我需要n'th部分才能看到蜜蜂。 当然，使用 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 未应用在页面上（因为页面只会滚动到该部分），并且您可能还拥有指向每个选项卡的永久链接（只需将哈希片段添加到 url）

关于:target的更多信息：MDN和CSS-Tricks