Html 如何仅使用CSS显示来自指定扰流板的消息？

我有一些扰流板，我需要在单击相应按钮后显示扰流板的内容

。扰流板{
溢出：隐藏；
}
#检查器{
显示：无；
}
.切换{
显示：块；
溢出：隐藏；
宽度：100px；
高度：20px；
背景#ecf0f1；
填充物：5px；
颜色：#aaa；
边界半径：3px；
光标：指针；
空白：nowrap；
}
#检查器：未（：已检查）~.扰流板{
身高：0；
}
#检查器：选中~。切换{
显示：无；
}
代码.文本{
空白：预处理；
字体系列：monospace；
字体大小：14px；
空白：正常；
}

这里的问题是，当我按下第一个扰流板时，总是显示第一个扰流板的内容

显示扰流板1
Lorem ipsum dolor sit amet 1.

显示扰流板2 Lorem ipsum dolor sit amet 2. 显示扰流板3 Lorem ipsum dolor sit amet 3. 我想为每个扰流板添加一个id，但我不知道CSS是否支持这一点

显示扰流板1
Lorem ipsum dolor sit amet 1.

显示扰流板2 Lorem ipsum dolor sit amet 2. 仅使用css，我认为每个人都有id可能是唯一的出路

。扰流板{
溢出：隐藏；
}
.检查器{
显示：无；
}
.切换{
显示：块；
溢出：隐藏；
宽度：100px；
高度：20px；
背景#ecf0f1；
填充物：5px；
颜色：#aaa；
边界半径：3px；
光标：指针；
空白：nowrap；
}
.checker:未（：选中）+.toggle+.spoiler{
身高：0；
}
.checker:选中+切换{
显示：无；
}
代码.文本{
空白：预处理；
字体系列：monospace；
字体大小：14px；
空白：正常；
}

显示扰流板1
Lorem ipsum dolor sit amet 1.

显示扰流板2 Lorem ipsum dolor sit amet 2.

---

@modInfo如果只有父选择器或某种方法来执行条件，它会更容易。