css - 如何使用复选框 : different outputs according to element id or class? 隐藏带有 css 的元素

Question

我有this code应该根据特定的复选框显示和隐藏元素输出。

我得到的输出是每个复选框在单击时显示的输出比应有的多。

如何使用特定的 css ID 来定位它们？

我的意思是，当您点击每个框时，它应该只显示引用该特定框的文本，而不是所有框。

感谢您的见解!!

罗莎蒙达

Answer 1

DEMO

/*styled relative to the label*/
label {display:block;}
label ~ div {display:none; margin-left:1em;}

/*targetting*/
/*boxes with id having this number will style a sibling div with this number*/
input[type="checkbox"][id*="131"]:checked ~ div[class*="131"] {display:inline;}
input[type="checkbox"][id*="134"]:checked ~ div[class*="134"] {display:inline;}
input[type="checkbox"][id*="130"]:checked ~ div[class*="130"] {display:inline;}