ckecked元素编号：nth-​​child css规则 [英] ckecked element number in :nth-child css rule

问题描述

我的页面和一些部分上有一些单选按钮。

 < input id =tab1type = radioname =responsive-tabsclass =responsive-selectchecked> 
< input id =tab2type =radioname =responsive-tabsclass =responsive-select> 
 
< section id =content1> 
某些内容
< / section> 
 
< section id =content2> 
某些内容
< / section> 
  

当选择第n个单选按钮时，我需要第n个节。
当然，它很容易实现通过使用jquery，但我想通过css只这样做，所以请帮助我。现在我这样做这样

 ＃tab1：checked〜＃content1，
＃tab2：checked〜 
＃tab3：checked〜＃content3，
＃tab4：checked〜＃content4 {
 display：block; 
} 
  

但我希望这个css规则更灵活和独立于元素计数。

解决方案

您可以使用：target pseudoclass

.io / anon / pen / yHEIsrel =nofollow> http://codepen.io/anon/pen/yHEIs

标记

 < a href =＃content1> Tab1< / a> 
< a href =＃content2> Tab2< / a> 
< a href =＃content3> Tab3< / a> 
 
< section id =content1> 
一些内容1 
< / section> 
 
< section id =content2> 
一些内容2 
< / section> 
 
< section id =content3> 
一些内容3 
< / section> 
  

CSS

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

---

从简单的跨浏览角度看， ：target 伪类具有与：checked 伪类相同的支持使用锚点实现的选项卡面板即使在页面上未应用CSS也能更好地工作（因为页面只会滚动到该部分），并且您还可以对每个选项卡添加固定链接（只是将散列片段添加到网址）

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

I've got some radiobuttons on my page and some sections.

<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>

I need n'th section to bee seen when n-th radiobutton selected. Of course, it's easy to achieve by using jquery, but i would like to do this by css only, so please help me. Now i do it like this

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

but i want this css rule to be more flexible and independable from elements count.

解决方案

You can achieve the same effect with the :target pseudoclass (using links instead of radio input) on modern browsers

Example http://codepen.io/anon/pen/yHEIs

Markup

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

---

From a simple cross-browsing perspective, the :target pseudoclass has the same support of the :checked pseudoclass (both are supported since IE9) but from a functional point of view a tab panel realized with anchors works better even when CSS is not applied on the page (because the page will simply scroll to the section) and you may also have permalinks to every single tab (just add the hash fragment to the url)

Further information on :target: MDN and CSS-Tricks

这篇关于ckecked元素编号：nth-​​child css规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！