Html css中的多重阅读更多问题，我如何解决？

我正在使用css制作“阅读更多”内容。我找到了一个在线解决方案。但是，当我让多个阅读更多的内容，有一个问题

单击第二个“阅读更多”按钮时，将打开第一组文本内容，而不是第二组内容。我该如何解决这个问题

文章{
边缘底部：3rem；
位置：相对位置；
*缩放：1；
}
文章：前，文章：后{
内容：“；
显示：表格；
}
第条{明确：两者}之后
文章部分：类型的最后一个{
显示：无；
可见性：隐藏；
}
部分{
-webkit转换：.125s线性；
-moz跃迁：.125s线性；
-ms跃迁：.125s线性；
-o转变：.125s线性；
过渡：.125s线性；
}
输入[类型=复选框]{
边界：0；
剪辑：rect（0）；
高度：1px；
宽度：1px；
保证金：-1px；
溢出：隐藏；
填充：0；
位置：绝对位置；
}
[for=“阅读更多”]{
位置：绝对位置；
底部：-3rem；
左：0；
宽度：100%；
文本对齐：居中；
填充：.65rem；
框阴影：插入1px 1px rgba（0,0,0,0.1），插入-1px-1px rgba（0,0,0,0.1）；
}
[for=“read_more”]：悬停{
背景：rgba（0,0,0,5）；
颜色：rgb（255255）；
}
[for=“read\u more”]span:类型的最后一个{
显示：无；
可见性：隐藏；
}
输入[类型=复选框]：选中~section{
显示：块；
能见度：可见；
宽度：100%；
}
输入[类型=复选框]：选中~图{宽度：100%}
输入[类型=复选框]：选中~[for=“read\u more”]span:类型的第一个{
显示：无；
可见性：隐藏；
}
输入[类型=复选框]：选中~[for=“read\u more”]span:类型的最后一个{
显示：块；
能见度：可见；
}

阅读更多隐藏
除了在非故意的情况下，其他腐败行为和其他犯罪行为都会导致暴力行为，同样的罪过也会导致对动物、劳动和精神的伤害。这是一个很好的例子。暂时的自由，以及解决方案，这是一种选择

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。内克·波罗·奎斯夸姆东部

​
阅读更多隐藏
除了在非故意的情况下，其他腐败行为和其他犯罪行为都会导致暴力行为，同样的罪过也会导致对动物、劳动和精神的伤害。这是一个很好的例子。暂时的自由，以及解决方案，这是一种选择

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。内克·波罗·奎斯夸姆东部

​

您需要分别更改

复选框

和

标签

元素中属性的

id和
。比如：

<input type="checkbox" id="read_more1" role="button"/>
<label for="read_more1" onclick=""><span>Read More</span><span>Hide</span></label>


阅读更多隐藏

然后在CSS代码中，一个可能的选择器可以是
[for^=“read\u more”]
，而不是
[for=“read\u more”]

检查a。
ID必须是唯一的。明白了，同样的解决方案也来自lmgonzalves！非常感谢。