Html 多个CSS广播节目隐藏在同一页上

我有一个工作显示/隐藏在CSS中，使用无线电类型。一切都很好，但当我尝试添加多个显示/隐藏时，它们都会同时打开。 这对我来说很有意义，因为他们有相同的ID和名称。所以我编辑了这些，所有的都是不同的，但是当它们在同一个页面上时，它们会丢失格式，并且会产生混乱

任何建议都会受到欢迎（除非你的建议是使用js或jquery：我知道使用js很容易，但我真的只想使用css/html）

谢谢

/*显示隐藏css*/
输入#显示，输入#隐藏{
显示：无；
}
第#段{
显示：无；
}
输入#显示：选中~div#段落{
显示：块；
浮动：左；
填充顶部：20px；
}
输入#隐藏：选中~div#段落{
显示：无；
}
.展示一下{
浮动：左；
背景色：#9b2f00；
边框样式：纯黑1px；
颜色：#f2e07b；
填充物：5px；
盒影：3px 3px黑色；
文本对齐：居中；
宽度：200px；
字体大小：15px
}
希迪斯先生{
浮动：对；
背景色：#9b2f00；
边框样式：纯黑1px；
颜色：#f2e07b；
填充物：5px；
盒影：3px 3px黑色；
字体大小：13px；
/*showhide css 01*/
输入#show01，输入#hide01{
显示：无；
}
第01段{
显示：无；
}
输入#show01：选中~div#段落01{
显示：块；
浮动：左；
填充顶部：20px；
}
输入#hide01:选中~div#第01段{
显示：无；
}
.展示这个01{
浮动：左；
背景色：#9b2f00；
边框样式：纯黑1px；
颜色：#f2e07b；
填充物：5px；
盒影：3px 3px黑色；
文本对齐：居中；
宽度：200px；
字体大小：15px
}
.hidethis01{
浮动：对；
背景色：#9b2f00；
边框样式：纯黑1px；
颜色：#f2e07b；
填充物：5px；
盒影：3px 3px黑色；
字体大小：13px；
}

[显示][隐藏]
此程序是免费软件；您可以重新发布和/或修改它
它是根据GNU通用公共许可证的条款发布的
自由软件基金会；许可证的第2版；或
（由您选择）任何更高版本。






[Show01][Hide01]
此程序是免费软件；您可以重新发布和/或修改它
它是根据GNU通用公共许可证的条款发布的
自由软件基金会；许可证的第2版；或
（由您选择）任何更高版本。

这个想法是使用下一个选择器

+

来显示/隐藏单个项目，并使用同级

~

来显示/隐藏所有项目

演示：

HTML

编辑：复选框解决方案在此处可用

---

编辑2:更改回

单选

，在两个按钮上显示/隐藏全部，一个按钮用于单个项目，这是我目前能做的最好的选择。

我遵循了sdcr的理念（非常感谢！）并且使用了复选框：它们工作得很好，所以尽管这不是一个正确的答案，因为我的原始问题不同，但我还是粘贴了代码：

/*仅显示隐藏CSS*/
/*作用*/
标签{
光标：指针；
}
#展示皮{
显示：无；/*隐藏复选框*/
}
#段落{
显示：无；
}
#显示隐藏：选中+#段落{
显示：块；
}
/*Showhide CSS only 02*/
标签{
光标：指针；
}
#showhide01{
显示：无；/*隐藏复选框*/
}
#第01段{
显示：无；
}
#showhide01:选中+#第01段{
显示：块；
}

我是第一个
原文



我是第二个
次要文本

不要使用ID，而是使用类…？你的意思是将所有ID更改为类？我现在尝试了一下，但很有趣，即使是单个显示/隐藏也不起作用。是否可以使用复选框在其中一个上显示/隐藏？你的意思是在其中一个上使用单选按钮，在另一个上使用复选框？我考虑过这一点，但在某些页面中，我可能有4、5个p我想这样分开一个图表，所以两个选项是不够的。我过去试过checkbox，他们给了我类似的问题。我的意思是对所有人都使用checkbox，我很快就会把它放在一个JSFIDLE中。你们两个都给出了一个正确的、有效的答案，并对checkbox的事情给出了一个有用的想法（我在回复中添加了这一点）。谢谢。

<label for="all">show all</label>
<input type="radio" name="radio" class="showall"/>

<label for="all">hide all</label>
<input type="radio" name="radio" class="hideall" />

<br/><br/><br/><br/>

<label for="a">show/hide</label>
<input type="radio" name="radio" class="single" />
<div class="content">a</div>

<br/><br/>

<label for="b">show/hide</label>
<input type="radio" name="radio" class="single" />
<div class="content">b</div>

.content {
    visibility: hidden;
    color: red;
}

.single:checked + .content {
    visibility: visible;
}

.showall:checked ~ .content {
    visibility: visible;
}

.hideall:checked ~ .content {
    visibility: hidden;
}