css3 selector_html/css_WEB-ITnose について質問する

下面的代码，当你单击第一个radio时会显示第一个panel的内容，单击第二个radio时会显示第二个panel的内容。
但是当在c1241ea17c1ad8069b07dc81ac7affea后加入c2d3c2988c95fc2257156ee14cee1036后单击第一个radio时会显示第二个panel的内容，加入的c2d3c2988c95fc2257156ee14cee1036为什么会影响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个子元素，
你在前面加了一个元素 c2d3c2988c95fc2257156ee14cee1036 
后面的元素在父元素中的排行就向下移了。
你要nth-of-type()中的数值
c9ccee2e6ea535a969eb3f532ad9fe89
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;
}
531ac245ce3e4fe3d50054a55f265927
a6e374fd6c27f4b9d1f6db7dfd9d5066
    c1241ea17c1ad8069b07dc81ac7affea
 c2d3c2988c95fc2257156ee14cee1036 
    7c527f7290cba439fc268a3cacd0a256df0ef8bd9f75ef3a392f319f98a7bb0fTab One8c1ecd4bb896b2264e0711597d40766c
    5818ff533c86a1a9122d673b854d0ab244a3214caf951a16914612889936323bTab Two8c1ecd4bb896b2264e0711597d40766c
    
    9a13f096e5f982d5de6a9874a27de4c5
        09283c4645d91ddfbdf808f9f69393171116b28748ea4df4d9c2150843fecfba68
        09283c4645d91ddfbdf808f9f69393172216b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    49a8ce3b185833521d70ccc24daf7994
    f5a47148e367a6035fd7a2faa965022e
16b28748ea4df4d9c2150843fecfba68

form.form input[name="tabs"] は 2 つの入力タグを選択します。 :nth-of-type(1) は同じレベルの最初の入力タグを選択します。ラベルのみを選択します。クラス名、属性名など。

nth-of-type(n) の n は、親要素の n 番目の子要素を参照します。
前に要素を追加しました a0d9e5cb65ceee7fc8b08f932a0fe312
に続く要素のランキングは、親要素内で下に移動します。
nth-of-type()
c9ccee2e6ea535a969eb3f532ad9fe89
form.form .panel {
表示: なし;
背景: #fff;
form.form .panel:first-child { 表示: ブロック; }
form.form input[name="tabs"]:checked ~ .panels .panel {
表示: なし; }
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) {
表示: ブロック;
}
531ac245ce3e4fe3d50054a55f265927
< ;div id="コンテンツ">
c0ad9ac645527ec2f29bc23250fb8032
10a0c4c6fe334f1dd2642c4aa224944a input id="one" name="tabs" type="radio" >9770639834edab19a63e1d1c46d360bfTab One8c1ecd4bb896b2264e0711597d40766c
33100346320d47ca7188eccc4c1aa3ef7c8ca4800491dd48438db313adb92ff0タブ 28c1ecd4bb896b2264e0711597d40766c

3fa0657a53ff2645e83d94bebbff933e
651e0f854f0005f7cc1315fbf027600e1116b28748ea4df4d9c2150843fecfba68
f5a47148e367a6035fd7a2faa965022e

ありがとうございます


form.form input[name="tabs] "] 2 つの入力タグを選択しました。 :nth-of-type(1) は、同じレベルの最初の入力タグを選択します。これはタグのみをターゲットにし、クラス名、属性名などをターゲットにすることはできません。

ありがとうございます

2階マスター。 。 。 。 。本当はjsで制御した方が良いと思います。 。 。後のメンテナンスを容易にするために、これをメソッドに書き込みます。

$('

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

})
})