php - 标签内的纯 CSS 标签

Question

被困在这个问题上几个小时，并不能完全弄清楚出了什么问题。我有 2 个主要选项卡，当您单击它们时，内容中会打开另一组选项卡。第一个主选项卡及其子选项卡工作正常。但是，第二个选项卡及其子选项卡不起作用。这是代码 - 感谢您的帮助。

这是 HTML:

    <div class="tabs">
    <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1" checked>
        <label for="tab-1">EVOLVE</label>
        <div class="content">
            <div class="table tab">
                <input type="radio" id="tabchild-1" name="tabchild-group-1" checked>
                <label for="tabchild-1">FOREST</label>
                <div class="content">
                    Forest Cards go Here.
                </div>
            </div>
            <div class="table tab">
                <input type="radio" id="tabchild-2" name="tabchild-group-1">
                <label for="tabchild-2">MOUNTAINS</label>
                <div class="content">
                    Mountain Cards go Here.
                </div>
            </div>
            <div class="table tab">
                <input type="radio" id="tabchild-3" name="tabchild-group-1">
                <label for="tabchild-3">SWAMP</label>
                <div class="content">
                    Swamp Cards go Here.
                </div>
            </div>
            <div class="table tab">
                <input type="radio" id="tabchild-4" name="tabchild-group-1">
                <label for="tabchild-4">PLAINS</label>
                <div class="content">
                    Plains Cards go Here.
                </div>
            </div>
            <div class="table tab">
                <input type="radio" id="tabchild-5" name="tabchild-group-1">
                <label for="tabchild-5">DARKNESS</label>
                <div class="content">
                    Darkness Cards go Here.
                </div>
            </div>
            <div class="table tab">
                <input type="radio" id="tabchild-6" name="tabchild-group-1">
                <label for="tabchild-6">NEUTRAL</label>
                <div class="content">
                    Neutral Cards go Here.
                </div>
            </div>
        </div> 
    </div>

    <div class="tab2">
        <input type="radio" id="tab-2" name="tab-group-1">
        <label for="tab-2">ENHANCE</label>
        <div class="content2">
            <div class="table2 tab2">
                <input type="radio" id="tabchild-1" name="tabchild-group-2" checked>
                <label for="tabchild-1">FOREST</label>
                <div class="content2">
                    Forest Hero Cards go Here.
                </div>
            </div>
            <div class="table2 tab2">
                <input type="radio" id="tabchild-2" name="tabchild-group-2">
                <label for="tabchild-2">MOUNTAINS</label>
                <div class="content2">
                    Mountain Hero Cards go Here.
                </div>
            </div>
            <div class="table2 tab2">
                <input type="radio" id="tabchild-3" name="tabchild-group-2">
                <label for="tabchild-3">SWAMP</label>
                <div class="content2">
                    Swamp Hero Cards go Here.
                </div>
            </div>
            <div class="table2 tab2">
                <input type="radio" id="tabchild-4" name="tabchild-group-2">
                <label for="tabchild-4">PLAINS</label>
                <div class="content2">
                    Plains Hero Cards go Here.
                </div>
            </div>
            <div class="table2 tab2">
                <input type="radio" id="tabchild-5" name="tabchild-group-2">
                <label for="tabchild-5">DARKNESS</label>
                <div class="content2">
                    Darkness Hero Cards go Here.
                </div>
            </div>
       </div> 
   </div>
    <div class="background_tab"></div>
</div>

这是CSS

        .tabs {position: relative;min-height: 200px;}
    .tab, .tab2 {float: left;}
    .tab{text-decoration:none;}
    .tab2{text-decoration:none;}
    .tab label, .tab2 label {
        padding: 10px; 
        margin-left: -1px; 
        position: relative;
        left: 1px;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        border-right: 1px solid #444;
        border-left: 1px solid #333;
        background: #3d3d3e;
        background: -webkit-linear-gradient(#3d3d3e, #2a2a2a);
        background: -moz-linear-gradient(#3d3d3e, #2a2a2a);
        background: -o-linear-gradient(#3d3d3e, #2a2a2a);
        background: linear-gradient(#3d3d3e, #2a2a2a);
        box-shadow: 0 1px 0 #3d3d3d, inset 0 1px 0 #5a5a5a;
        height: 100%;
        line-height: 24px;
        overflow: hidden;
        text-align: center;
        font-size: 12px;
        font-family: verdana;
        font-weight:bolder;
        z-index:1;
        }
    .tab [type=radio], .tab2 [type=radio]{display: none;}
    .content, .content2{
        position: absolute;
        top: 28px;
        left: 0;
        right: 0;
        bottom: 0;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        border-left: 1px solid #666;
        background: #5d5d5e;
        background: -webkit-linear-gradient(#5d5d5e, #4a4a4a);
        background: -moz-linear-gradient(#5d5d5e, #4a4a4a);
        background: -o-linear-gradient(#5d5d5e, #4a4a4a);
        background: linear-gradient(#5d5d5e, #4a4a4a);
        box-shadow: 0 1px 0 #5d5d5d, inset 0 1px 0 #4a4a4a;
        padding: 0px 25px 25px;
        margin-top:25px;
        z-index:1
        }
    [type=radio]:checked ~ label{
        box-shadow: inset 0 0 10px black;
        text-shadow: -2px -2px 1px #111111, -1px -1px 1px #111111, 1px 1px 1px #111111, 2px 2px 1px #111111, -3px -3px 1px #111111, -1px 1px 1px #111111, -3px 3px 1px #111111, 5px -2px 1px #111111, 5px 3px 1px #111111;
        color:orangered;
        z-index: 2;
        }
    [type=radio]:checked ~ label ~ .content {z-index: 2;}
    [type=radio]:checked ~ label ~ .content2 {z-index: 3;}
    .background_tab{
        float:left;
        padding: 10px 10px 26px; 
        margin-left: -1px; 
        position: relative;
        left: 2px;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        border-left: 1px solid #333;
        background: #3d3d3e;
        background: -webkit-linear-gradient(#3d3d3e, #2a2a2a);
        background: -moz-linear-gradient(#3d3d3e, #2a2a2a);
        background: -o-linear-gradient(#3d3d3e, #2a2a2a);
        background: linear-gradient(#3d3d3e, #2a2a2a);
        box-shadow: 0 1px 0 #3d3d3d, inset 0 1px 0 #5a5a5a;
        height: 100%;
        line-height: 24px;
        overflow: hidden;
        text-align: center;
        font-size: 12px;
        font-family: verdana;
        margin-top:14px;
        width:729px;
        }

Answer 1

第二个选项卡组 (div.tab2) 中的 radio 按钮与第一组中的按钮具有相同的 ID (div.tab)。

更改它们，它将正常工作(例如:)

<div class="table2 tab2">
    <input type="radio" id="tab2child-3" name="tabchild-group-2">
    <label for="tab2child-3">SWAMP</label>
    <div class="content2">
        Swamp Hero Cards go Here.
    </div>
</div>

等...

请记住还要将 for 属性更改为每个相应的标签。

这是一个有效的 jsfiddle .