我用CSS编写了一个tab组件,该代码段在这里很好用,但是在我自己的网页上不起作用,这是什么问题?
.tabs {
position: relative;
display: flex;
margin: 25px 0;
justify-content: center;
flex-direction: row;
border-bottom: 1px solid #ccc;
}
.tabs .tab {
margin: 0 5px;
display: block;
}
.tabs .tab label {
background: #ffffff;
border: 1px solid #ccc;
margin-left: -1px;
left: 1px;
height: 24px;
line-height: 24px;
display: inline-block;
padding: 0 10px;
min-width: 56px;
position: relative;
top: 1px;
}
.tabs .tab label::before {
display: none;
}
.tabs .tab label:hover {
background-color: #eee;
}
.tabs .tab .content {
position: absolute;
top: 26px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
opacity: 0;
min-height: 200px;
}
.tabs .tab input[type="radio"] {
display: none;
}
.tabs .tab input[type="radio"]:checked~label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
.tabs .tab input[type="radio"]:checked~label~.content {
z-index: 1;
opacity: 1;
}
<div class="tabs">
<div class="tab">
<input type="radio" name="radio_tab" id="t1" checked="checked"><label for="t1">Customers</label>
</div>
<div class="tab">
<input type="radio" name="radio_tab" id="t2"><label for="t2">Users</label>
</div>
<div class="tab">
<input type="radio" name="radio_tab" id="t3"><label for="t3">Roles</label>
</div>
<div class="tab">
<input type="radio" name="radio_tab" id="t4"><label for="t4">Themes</label>
</div>
</div>
应该将选定的单选选项显示为选中状态,但是在my own page中未选中。