Home > Web Front-end > HTML Tutorial > 请教关于nth-child的问题_html/css_WEB-ITnose

请教关于nth-child的问题_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:20:52
Original
1213 people have browsed it

有如下代码

<style>.formtabs .panel { display: none; }.formtabs .panel:first-child { display: block; }.formtabs input[name="tabs"]:checked ~ .panels .panel { display: none; }.formtabs input[name="tabs"]:nth-of-type(1):checked ~ .panels .panel:nth-child(1),.formtabs input[name="tabs"]:nth-of-type(2):checked ~ .panels .panel:nth-child(2),.formtabs input[name="tabs"]:nth-of-type(3):checked ~ .panels .panel:nth-child(3) { display: block; }</style><div class="formtabs">    <input id="one" name="tabs" type="radio" checked>    <input id="two" name="tabs" type="radio">    <input id="three" name="tabs" type="radio">    <div class="panels">        <form method="post" action="" class="form">        <!-- <input type="hidden" name=""> -->        <div class="panel">11</div>        <div class="panel">22</div>        <div class="panel">33</div>                </form>    </div>            </div>
Copy after login

我想实现的功能是,当选择第一个radio时显示第一个panel,选择第二个radio时显示第二个panel,依次类推。
上面的代码可以实现上述功能,但是如果在

如果在
我觉得不管在from后又多少个hidden的input,“.panels .panel:nth-child(1)”这个始终指向第一个pannel的呀
问题出在哪里呢?
除了把


回复讨论(解决方案)

:nth-of-type(1)

:nth-of-type(1)


谢谢
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template