Html 纯CSS，具有更改文本的小部件

我必须做一个有笑话的小部件。只应显示一个笑话，并且有一个按钮“更改”，将笑话文本更改为下一个

它应该包含大约10个笑话，如下所示：

我知道如何使用JS实现，但关键是要用纯CSS实现这样的小部件

我认为解决方案将与

和选择器

:checked

，

:n个孩子

相连接，但我不知道如何将其组合在一起

UPD：我的HTML如下所示：

笑话

笑话一

笑话2

---

纯CSS解决方案

。文章文本，
标签{
显示：无
}
标签{
光标：指针
}
输入#switch-humor-1：选中~。article_utext.humor-1，
输入#switch-humor-1：选中~label[for=“switch-humor-2”]，
输入#switch-humor-2：选中~。article_utext.humor-2，
输入#switch-humor-2：选中~label[for=“switch-humor-3”]，
输入#switch-humor-3：选中~。article_utext.humor-3，
输入#switch-humor-3：选中~label[for=“switch-humor-4”]，
输入#switch-humor-4：选中~。article_utext.humor-4，
输入#switch-humor-4：选中~label[for=“switch-humor-5”]，
输入#switch-humor-5：选中~。article_utext.humor-5，
输入#switch-humor-5：选中~label[for=“switch-humor-1”]{
显示：块；
}
.文章标题{
字体大小：1.5rem；
}

笑话


笑话一


笑话2


笑话3


笑话4


笑话五

重新加载
重新加载
重新加载
重新加载
重新加载纯CSS解决方案


。文章文本，
标签{
显示：无
}
标签{
光标：指针
}
输入#switch-humor-1：选中~。article_utext.humor-1，
输入#switch-humor-1：选中~label[for=“switch-humor-2”]，
输入#switch-humor-2：选中~。article_utext.humor-2，
输入#switch-humor-2：选中~label[for=“switch-humor-3”]，
输入#switch-humor-3：选中~。article_utext.humor-3，
输入#switch-humor-3：选中~label[for=“switch-humor-4”]，
输入#switch-humor-4：选中~。article_utext.humor-4，
输入#switch-humor-4：选中~label[for=“switch-humor-5”]，
输入#switch-humor-5：选中~。article_utext.humor-5，
输入#switch-humor-5：选中~label[for=“switch-humor-1”]{
显示：块；
}
.文章标题{
字体大小：1.5rem；
}

笑话


笑话一


笑话2


笑话3


笑话4


笑话五

重新加载
重新加载
重新加载
重新加载
重新加载
我真的不建议您这样做，除非您愿意投入一些时间来测试可访问性。但这是一个有趣的练习

我试图创建一个可以在不同地方使用的代码，因此ID在选择器中并不重要，而是位置。
我尝试使用选择器和


。李开玩笑说{
显示：无；
}
输入：第n个类型（1）：选中~。输入：第n个类型（1），
输入：第n个类型（2）：选中~。输入：第n个类型（2），
输入：第n个类型（3）：选中~。输入：第n个类型（3），
输入：类型（4）的第n个：选中~。输入：类型（4）的第n个{
显示：块；
}

笑话1

笑话2

笑话3

笑话4



笑话一


笑话2


笑话3


笑话4

我真的不建议您这样做，除非您愿意投入一些时间来测试可访问性。但这是一个有趣的练习

我试图创建一个可以在不同地方使用的代码，因此ID在选择器中并不重要，而是位置。
我尝试使用选择器和


。李开玩笑说{
显示：无；
}
输入：第n个类型（1）：选中~。输入：第n个类型（1），
输入：第n个类型（2）：选中~。输入：第n个类型（2），
输入：第n个类型（3）：选中~。输入：第n个类型（3），
输入：类型（4）的第n个：选中~。输入：类型（4）的第n个{
显示：块；
}

笑话1

笑话2

笑话3

笑话4



笑话一


笑话2


笑话3


笑话4

是的，您可以使用纯css，但显示一些代码是的，您可以使用纯css，但显示一些代码您对可访问性有何顾虑？事实上，对于任何一个屏幕阅读器来说，这种方法不是比传统的方法更具信息性吗？使用单选按钮来做一些他们不想做的事情已经是一个问题了。也许使用aria控件会有所帮助。我更喜欢这个场景的目标解决方案。可能是用户测试的一个很好的例子。您对可访问性有什么担心？事实上，对于任何一个屏幕阅读器来说，这种方法不是比传统的方法更具信息性吗？使用单选按钮来做一些他们不想做的事情已经是一个问题了。也许使用aria控件会有所帮助。我更喜欢这个场景的目标解决方案。可能是用户测试的一个好例子。