仅使用HTML/CSS和选中选择器的交互式选项卡

我正在尝试构建一个用于HTML电子邮件的交互式选项卡部分，因此它只能使用HTML/CSS。我需要做的是默认情况下不显示任何内容，然后仅在选择了选项卡2内容之后才显示选项卡1内容。我有它半工作，但无法让标签1显示后，标签2是开放的。我使用：checked选择器显示选项卡，使用general sibling combinator显示关联的选项卡内容-两个类.box1和.box2。我确信我遗漏了一些东西，仅仅使用CSS可以实现吗

非常感谢

/*隐藏无线电元素*/
.我的收音机{
显示：无；
高度：0px；
可见性：隐藏；
}
.我的盒子{
宽度：100px；
高度：50px；
背景色：#eeeeee；
显示：无；
填充物：5px；
}
/*将选项卡更改为粗体*/
.myradio:选中+标签{
字体大小：粗体；
} 
/*显示内容*/
#radio1:选中~.box1，
#radio2:选中~.box2
{
显示：块；
}

表1|
表2
方框1
框2

您可以使用此代码

正文{
保证金：0；
}
.标签{
位置：相对位置；
明确：两者皆有；
宽度：100%；
浮动：左；
}
.标签.标签{
浮动：左；
右边距：10px；
背景色：#dedede；
填充：5px20px；
}
.内容{
位置：绝对位置；
背景色：#eeeeee；
填充：15px；
宽度：100%；
左：0px；
顶部：45px；
}
.tabs.tab:n类型（1）.内容{
z指数：1；
}
.选项卡：目标a{
字体大小：粗体；
文字装饰：无；
}
.teb a，
a:悬停{
文字装饰：无；
}
.tab:target.content{
z指数：1；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。交通工具前水平的生命之光。在pulvinar ullamcorper ligula，vel iaculis erat pharetra eu。维瓦摩斯·比本杜姆·奥古斯（Vivamus scelerisque bibendum augue）的权杖，威尼那提（purus venenatis）的效率。塞德枕
苏打水等分。毛里斯·珀鲁斯的功效。埃尼安·阿利奎特·西米。arcu sit amet sodales中的Nullam发酵液。努克·塞德·佩伦茨克·梅特斯。在事前，没有一件事是可以完成的。在索利西图丁的精英生活
菲利斯。库拉比图尔·比本杜姆·乌拉姆科珀·菲尼布斯。克拉斯·伊库利斯（Cras iaculis）在马萨tincidunt ullamcorper的sem。不要把它当作一个解决方案。我们在爱洛斯·拉奥里特·法雷特拉（eros laoreet pharetra）的康莫多·多洛（commodo dolor）。
这是一种封建的设施。箭矢是一种节杖，它能使你的身体更加健康。pulvinar turpis中的Vivamus。要有尊严，要有精英，要有勇气。索利西图丁洛雷姆酒店。杜内克乌兰科珀酒店
拉卡斯·埃吉特·杜伊·马蒂斯·波苏尔。Donec ut auctor odio。虎口浮雕和肘部浮雕同侧前庭；在温文尔雅的前庭，两人在一起。
我爱你。莫比·瓦里乌兰科珀。莫比拍卖人埃尼姆·泰勒斯。福西布斯·达皮布斯·洛雷姆（Phasellus faucibus dapibus lorem）是一家大型制药厂。请不要在拉齐尼亚岛上吃苦头。在中间分子中，在矢状体中最明显。马塞纳斯廷西登酒店
尼西汽水。普罗因康莫多在梅特斯在瓦里乌斯。Nalla sodales、neque sit amet酵素finibus、猫科动物前庭enim、ut酵素tellus diam和非猫科动物。普罗因ac马萨萨皮恩。前庭弓形，圆形，菱形直径。
连续矢状体的分支。