基于Radio按钮替代无序列表实现无类CSS标签页内容

我需要把基于无序列表实现的无类CSS标签页，改成用Radio按钮与label组件实现，要求代码简洁无冗余，目标HTML结构如下：

<nav>
    <input type="radio" name="tabs" checked>
    <label for="tab1">One</label>
    <input type="radio" name="tabs">
    <label for="tab2">Two</label>
    <input type="radio" name="tabs">
    <label for="tab3">Three</label>
    <section id="tab2">Tab 2</section>
    <section id="tab3">Tab 3</section>
    <section id="tab1">Tab 1</section>
</nav>

注：原目标结构中缺少radio的id属性，label的for无法关联到对应radio，需补充id才能保证功能正常。

原有列表版核心代码（可运行） #

CSS #

nav>ul~section:last-of-type{display:block;}
nav>ul~section:target~section:last-of-type{display:none;}
section:not(:target) {display:none;}

HTML #

<nav>
    <ul>
        <li><a href="#tab1">One</a>
        <li><a href="#tab2">Two</a>
        <li><a href="#tab3">Three</a>
    </ul>
    <section id="tab2">Tab 2</section>
    <section id="tab3">Tab 3</section>
    <section id="tab1">Tab 1</section>
</nav>

改造后的Radio+Label实现（贴合目标结构） #

核心CSS（无类、无冗余） #

/* 隐藏radio按钮，仅保留label作为切换入口 */
nav > input[type="radio"] {
    display: none;
}

/* 默认显示最后一个section（和原列表版逻辑一致，默认展示Tab1） */
nav > section:last-of-type {
    display: block;
}

/* 未选中对应radio时，隐藏非默认的section */
nav > section:not(:last-of-type) {
    display: none;
}

/* 选中tab2的radio时，显示tab2 */
#tab2-radio:checked ~ #tab2 {
    display: block;
}

/* 选中tab3的radio时，显示tab3 */
#tab3-radio:checked ~ #tab3 {
    display: block;
}

/* 选中tab1的radio时，仅显示默认的tab1 */
#tab1-radio:checked ~ #tab2,
#tab1-radio:checked ~ #tab3 {
    display: none;
}

修正后的HTML（补全radio的id，保证label关联有效） #

<nav>
    <input type="radio" name="tabs" checked id="tab1-radio">
    <label for="tab1-radio">One</label>
    <input type="radio" name="tabs" id="tab2-radio">
    <label for="tab2-radio">Two</label>
    <input type="radio" name="tabs" id="tab3-radio">
    <label for="tab3-radio">Three</label>
    <section id="tab2">Tab 2</section>
    <section id="tab3">Tab 3</section>
    <section id="tab1">Tab 1</section>
</nav>

逻辑说明 #

1. 隐藏radio按钮，用label作为可点击的标签切换器，通过for属性关联对应radio
2. 延续原列表版的默认逻辑：默认显示最后一个section（Tab1）
3. 利用CSS兄弟选择器，根据radio的选中状态，切换对应section的显示/隐藏
4. 所有代码无额外类名，保持简洁无冗余

内容的提问来源于stack exchange，提问作者ruzip