Html Can'；不要使用CSS隐藏内容并再次正确显示，不同的类会相互干扰

我无法隐藏列表中的内容并再次正确显示，因为类会干扰其他类。如果单击其中一个100ml链接，则会移动另一个100ml的内容，该内容具有不同的类别（PicanteSimillascien和picante cien类别）

HTML代码是：

li.picantesimillascien{
显示：无；
}
科学人{
显示：内联块；
}
皮坎特塞米利亚斯先生{
宽度：100%；
}
.picantesimillas a[class=“picantesimillascien”]：focus~li:not（[class=“picantesimillascien”]）{
显示：无；
}
.picantesemillas a[class=“picantesemillascien”]：focus~li[class=“picantesemillascien”]{
显示：内联块；
}
.picantesemillas a[class=“picantesemillastrescientos”]：focus~li[class=“picantesemillastrescientos”]{
显示：内联块；
}
.卡片{
显示：内联块；
}
李·皮坎特·西恩{
显示：无；
}
李·皮坎特·特雷科多斯{
显示：内联块；
}
皮坎特先生{
宽度：100%；
}
.picante a[class=“picante cien”]：焦点~li:非（[class=“picante cien”]）{
显示：无；
}
.picante a[class=“picante cien”]：focus~li[class=“picante cien”]{
显示：内联块；
}
.picante a[class=“picante trescientos”]：focus~li[class=“picante trescientos”]{
显示：内联块；
}

西恩塞米利亚斯酒店


塞米利亚斯特里斯科多斯酒店


皮坎特·西恩


皮坎特·特雷科多斯

首先，欢迎来到StackOverflow

除非出于某种原因您不能使用JavaScript，否则让它提供功能并操作DOM而不是使用CSS显示/隐藏可能会更好地服务于您的用例。通常，

焦点

伪选择器用作辅助功能增强

下面是实现相同功能的快速模型。另外，纯粹为了简洁起见，我去掉了

和

元素，并将主要元素制作成HTML段落，带有可以交换的跨距。此外，所有被调用的CSS（这有点困难）都被删除了，因为在使用JavaScript时它是不必要的

为了简单起见，下面的代码甚至可以更加优雅

西恩塞米利亚斯酒店


皮坎特·西恩

函数选择1（）{
document.getElementById（“choice1”）.innerHTML=“semillas cien”；
}
函数选择2（）{
document.getElementById（“choice1”）.innerHTML=“semillas trescientos”；
}
函数选择B1（）{
document.getElementById（“choice2”）.innerHTML=“picante cien”；
}
函数选择B2（）{
document.getElementById（“choice2”）.innerHTML=“picante trescientos”；
}

这里有点困惑。你可能想看看相邻兄弟姐妹和一般兄弟姐妹组合词之间的区别。你的HTML对startDhruvi Makvana无效。我已经尝试过将～（相邻兄弟姐妹）更改为+（一般兄弟姐妹），如果你点击一个，它就不起作用了，因为我的HTML无效是什么意思？Karolus非常感谢，我在这个问题上花了很多时间，不想使用Java，但我没有任何适合我的问题的代码，因为我不知道如何用Java编程。你帮了大忙，我真的很感激。