请教关于css3选择器的问题_html/css_WEB-ITnose-HTML Tutorial-php.cn

请教关于css3选择器的问题_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 08:51:29

Original

1153 people have browsed it

下面的代码，当你单击第一个radio时会显示第一个panel的内容，单击第二个radio时会显示第二个panel的内容。
但是当在

后加入后单击第一个radio时会显示第二个panel的内容，加入的为什么会影响pannel的显示呢？

<style>form.form .panel {    display: none;    background: #fff;}form.form .panel:first-child { display: block; }form.form input[name="tabs"]:checked ~ .panels .panel {    display: none;}form.form input[name="tabs"]:nth-of-type(1):checked ~ .panels .panel:nth-child(1),form.form input[name="tabs"]:nth-of-type(2):checked ~ .panels .panel:nth-child(2) {    display: block;}</style><div id="content">    <form method="post" action="#" class="form"><!-- <input type="hidden"> -->    <input id="one" name="tabs" type="radio" ><label for="one">Tab One</label>    <input id="two" name="tabs" type="radio"><label for="two">Tab Two</label>        <div class="panels">        <div class="panel">11</div>        <div class="panel">22</div>    </div>    <input type="submit" value="Submit">    </form></div>

Copy after login

回复讨论(解决方案)

nth-of-type(n) 中的n是指在父元素中的第n个子元素，
你在前面加了一个元素
后面的元素在父元素中的排行就向下移了。
你要nth-of-type()中的数值

    Tab One
    Tab Two

form.form input[name="tabs"]选择到了两个input标签， :nth-of-type(1)选择的是同级里input标签的第一个，仅仅针对标签不能针对类名属性名等。

nth-of-type(n) 中的n是指在父元素中的第n个子元素，
你在前面加了一个元素
后面的元素在父元素中的排行就向下移了。
你要nth-of-type()中的数值

谢谢

form.form input[name="tabs"]选择到了两个input标签， :nth-of-type(1)选择的是同级里input标签的第一个，仅仅针对标签不能针对类名属性名等。

非常感谢

2楼大神。。。。。其实我觉得还不如用js去控制。。。将它写到方法中，以方便后期的维护。

$('             $(this).click(function () {
                  $('.panel').eq(index).show();
             })
})