html - 正常代码在 CSS 选项卡内工作异常

Question

我正在为我的博客制作访客页面代码:

 <div class="guest_tistory_write">
        <s_guest_input_form>
            <div class="g_write">
                <s_guest_member>
                    <s_guest_form>
                    <div class="write_input_info">
                        <input type="text" name="[##_guest_input_name_##]" value="[##_guest_name_##]" placeholder="이름" />
                        <input type="text" name="[##_guest_input_password_##]" value="[##_guest_password_##]" maxlength="8" placeholder="비밀번호" />
                        <input type="text" name="[##_guest_input_homepage_##]" value="[##_guest_homepage_##]" placeholder="홈페이지" />
                    </div>
                    </s_guest_form>
                </s_guest_member>
                <div class="write_input_cont">
                <textarea name="[##_guest_textarea_body_##]" cols="50" rows="6"></textarea>
                <input type="submit" value="올리기" onclick="[##_guest_onclick_submit_##]" />
                </div>
            </div>
        </s_guest_input_form>
   </div>

它正常工作:http://jsfiddle.net/o3omng/3bzgb/(s_something 标签是替换标签。)

但是如果这段代码进入用 CSS 制作的选项卡，然后它就出问题了。

<div id="guest_tabs">
        <!-- 라디오 -->
        <input type="radio" id="tab1" name="tab" checked="checked" />
        <input type="radio" id="tab2" name="tab" />
        <!-- 라벨 -->
        <label for="tab1">소셜 방명록</label>
        <label for="tab2">티스토리 방명록</label>
        <!-- 각 탭 내용 -->
        <div class="guest_tab1">
            <!-- 소셜 방명록 -->
            <p>여기에 소셜 방명록 코드를 붙여넣어 주세요.</p>
        </div>
        <div class="guest_tab2">
            <!-- 티스토리 방명록 -->
            <div class="guest_tistory">

                <!-- The code that I show you first. -->

                <div class="guest_tistory_list">    
                </div>
            </div>
        </div>
    </div>

像这样:http://jsfiddle.net/o3omng/hqsX9/

代码必须像第一个代码一样向我显示五个输入，但第二个代码只显示两个输入。

Answer 1

您的第二个示例隐藏了每个输入元素，因为您告诉浏览器这样做:

#guest_tabs input:nth-of-type(1),
#guest_tabs input:nth-of-type(1) ~ div:nth-of-type(1),
#guest_tabs input:nth-of-type(2),
#guest_tabs input:nth-of-type(2) ~ div:nth-of-type(2) {
    display : none ;
}

你在这里告诉他隐藏单选按钮，这样就没办法切换标签了。将您的 CSS 更改为如下所示，并检查结果是否符合您的预期:

#guest_tabs input:nth-of-type(1) ~ div:nth-of-type(1),
#guest_tabs input:nth-of-type(2) ~ div:nth-of-type(2) {
    display : none ;
}