css - 检查 :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 伪类(使用链接而不是单选输入)实现相同的效果

Example 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; }

---

从简单的跨浏览 Angular 来看，:target 伪类与 :checked 伪类具有相同的支持(从 IE9 开始都支持)，但从功能的 Angular 来看可以看出，即使页面上未应用 CSS，使用 anchor 实现的选项卡面板也能更好地工作(因为页面将简单地滚动到该部分)，并且您可能还拥有指向每个选项卡的永久链接(只需将哈希片段添加到 url)

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