请教关于css3选择器的问题

[yiyamzen]

下面的代码，当你单击第一个radio时会显示第一个panel的内容，单击第二个radio时会显示第二个panel的内容。
但是当在<form method="post" action="#" class="form">后加入<input type="hidden">后单击第一个radio时会显示第二个panel的内容，加入的<input type="hidden">为什么会影响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>

[天际的海浪]

nth-of-type(n) 中的n是指在父元素中的第n个子元素， 你在前面加了一个元素 <input type="hidden"> 后面的元素在父元素中的排行就向下移了。 你要nth-of-type()中的数值 <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(2):checked ~ .panels .panel:nth-child(1), form.form input[name="tabs"]:nth-of-type(3):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>

[haoyue70]

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

[yiyamzen]

引用 1 楼 jslang 的回复:

nth-of-type(n) 中的n是指在父元素中的第n个子元素， 你在前面加了一个元素 <input type="hidden"> 后面的元素在父元素中的排行就向下移了。 你要nth-of-type()中的数值 <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(2):checked ~ .panels .panel:nth-child(1), form.form input[name="tabs"]:nth-of-type(3):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>

谢谢

[yiyamzen]

引用 2 楼 haoyue70 的回复:

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

非常感谢

[风中的少年]

2楼大神。。。。。其实我觉得还不如用js去控制。。。将它写到方法中，以方便后期的维护。 $('<input [name="tabs"]').each(function (index) { $(this).click(function () { $('.panel').eq(index).show(); }) })