How do I get CSS code [class^="sz"] to work

I have scattered in a large text web page a large number of small sections of text that need to be shown or hidden individually and I only have a very rudimentary knowledge of CSS.
These sections are given ID 'sz1' to 'sz99' and I understand I should use CSS code like:
Code:[class^="sz"] {
}
[class$="n"] (n being a number) to show or hide each.

Almost every combination I have tried results in all of the individual bits of text showing/hiding or those that follows from the one that is currently 'clicked'.
(I have tried the code below using checkboxes instead of radio buttons.)

Can someone tell me what is a correct code for this? I simply can not figure how [class^="sz"] works despite hours of searching on the internet.
All info I have found is about applying the same effect on all.
Code:css
===
input#show, input#hide {
display:none;
}

span#sz1 {
display:none;
}
input#show:checked ~ span#sz1 {
display:block;
}

input#hide:checked ~ span#sz1 {
display:none;
}
</style>

html
====
<label for="show">
<span>[Show]</span>
</label>
<input type=radio id="show" name="group">
<label for="hide">
<span>[Hide]</span>
</label>
<input type=radio id="hide" name="group">
<span id="sz1">
Some content here.
</span>The HTML part is repeated as many times as there is a text segment starting with ID "sz".

Thank you for your help.