Html 一页中有两组标签，标签上有一个；勾选“；默认选项卡

我在一个页面中有两组css选项卡，标题和标签相同，但内容不同，两个第一个选项卡都已在css中“选中”，但其行为方式似乎两组选项卡只有一个“选中”属性。我希望两套都有一个选中的标签。这是否可能只使用css？这是我到目前为止的一份副本

html

---

抄送我的密码笔：非常感谢

唯一的问题是您将所有收音机放在同一组中

.m-tab、.p-tab{
显示：内联块；
宽度：400px；
高度：450px；
}
.m-tab.tab信息，.p-tab.tab信息{
显示：无；
填充：10px；
边框顶部：1px实心#abc；
}
.制表符输入{
显示：无；
}
.标签{
显示：内联块；
利润率：0-1px；
填充：15px 25px；
字号：600；
文本对齐：居中；
颜色：rgb（134206155）；
边框：1px实心透明；
}
.选项卡标签：悬停{
颜色：rgb（4718789）；
光标：指针；
}
.选项卡输入：选中+标签{
颜色：rgb（216351）；
边框：1px实心#abc；
边框顶部：3倍实心rgb（27、190、76）；
边框底部：1px实心#fff；
}
#about-m：选中~#m-about，
#profile-m：选中~#m-profile，
#典型-m：选中#m-典型，
#about-p：选中~#p-about，
#profile-p：选中~#p-profile，
#典型-p：选中#p-典型{
显示：块；
}

关于我
轮廓
典型日
知识产权是一种美德，是一种美德，是一种美德，是一种美德

知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德

这是一种临时性的劳动和福利，它是一种日常消费

关于我
轮廓
典型日
Hic原则是一种智慧的缺失，但它是一种理性的行为，也就是一种理性的行为

两人或两人都有权在法庭上受到谴责，但在法庭上，不允许任何人因不谨慎而放弃权利，也不允许任何人因疏忽而受到惩罚

除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

<div class="tabs m-tab">
<input id="about-m" type="radio" name="tabs" checked="checked">
<label for="about-m">About Me</label>

 <input id="profile-m" type="radio" name="tabs">
<label for="profile-m">Profile</label>

<input id="typical-m" type="radio" name="tabs">
<label for="typical-m">Typical Day</label>

<div class="tab-info" id="m-about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do ore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="tab-info" id="m-profile">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="tab-info" id="m-typical">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>

<div class="tabs p-tab">
<input id="about-p" type="radio" name="tabs" checked="checked">
<label for="about-p">About Me</label>

<input id="profile-p" type="radio" name="tabs">
<label for="profile-p">Profile</label>

<input id="typical-p" type="radio" name="tabs">
<label for="typical-p">Typical Day</label>

<div class="tab-info" id="p-about">
<p>Hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</div>

<div class="tab-info" id="p-profile">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="tab-info" id="p-typical">
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

.m-tab, .p-tab {
    display:inline-block;
    width:400px;
    height:450px;
}

.tab-info {
    display:none;
    padding:10px;
    border-top:1px solid #abc;
}

.tabs input {
    display:none;
}

.tabs label {
    display:inline-block;
    margin:0 0 -1px;
    padding:15px 25px;
    font-weight:600;
    text-align:center;
    color: rgb(134, 206, 155);
    border: 1px solid transparent;
}

.tabs label:hover {
    color:rgb(47, 187, 89);
    cursor:pointer;
}

.tabs input:checked + label {
    color:rgb(2, 163, 51);
    border:1px solid #abc;
    border-top:3px solid rgb(27, 190, 76);
    border-bottom:1px solid #fff;
}


#about-m:checked ~ #m-about,
#profile-m:checked ~ #m-profile,
#typical-m:checked ~ #m-typical,
#about-p:checked ~ #p-about,
#profile-p:checked ~ #p-profile,
#typical-p:checked ~ #p-typical {
    display: block;
}