html - 选择一个单选按钮后无法选择另一个单选按钮

Question

我正在使用单选按钮破解纯 CSS 选项卡，但最近我遇到了一个问题，当一个单选按钮被选中时，其他按钮都无法选中。当我将鼠标悬停在标签上时，它甚至不会改变背景颜色，就像我在 CSS 中指定的那样。

相关代码如下:

<style>
.content-wrap{
display: none;
position: absolute;
top: 80px;
left: 0;
width: 100%;
height: calc(100% - 80px);
overflow-y: auto;
}
#main-wrap label{
display: block;
width: 48px;
height: 48px;
}
#main-wrap input[type=radio]{

}
#main-wrap [id^="tab"]:checked + label {
background-color: #404040;
}
#tab1:checked ~ #content-history,
#tab2:checked ~ #content-outline,
#tab3:checked ~ #content-edit,
#tab4:checked ~ #content-revise {
display: block;
}
</style>
<div id='main-wrap'>

            <input type='radio' name='main-wrap' id='tab1' value=''><label for='tab1' class='metro-icon'>
            <img src="https://maxcdn.icons8.com/windows10/PNG/64/Time_And_Date/hourglass-64.png" title="Hourglass" width="24">
            </label>

            <input type='radio' name='main-wrap' id='tab2' value=''>
            <label for='tab2' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Programming/outline-64.png" title="Outline" width="24">
            </label>

            <input type='radio' name='main-wrap' id='tab3' value=''>
            <label for='tab3' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Editing/pencil_tip-64.png" title="Pencil Tip" width="24">
            </label>

            <input type='radio' name='main-wrap' id='tab4' value=''>
            <label for='tab4' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Files/edit_file-64.png" title="Edit File" width="24">
            </label>

            <div class='content-wrap' id='content-history'>
                <div class='main'>
                <p>This is the history tab!</p>
                </div>
            </div>

            <div class='content-wrap' id='content-outline'>
                <div class='main'>
                <p>This is the outline tab!</p>
                </div>
            </div>

            <div class='content-wrap' id='content-edit'>
                <div class='main'>
                <div contenteditable id='main-input'>This is the edit tab!</div>
                </div>
            </div>

            <div class='content-wrap' id='content-revise'>
                <div class='main'>
                <p>This is the revise tab!</p>
                </div>
            </div>
</div>

我错过了什么？

Answer 1

使用这个 CSS:

#main-wrap input[type=radio]{
    position:relative;
    z-index:999;
}