问纯CSS解决方案-当选中单选按钮时，我希望标记的元素可以是可见的，也可以是隐藏的。

EN

/* Demo : toggle display from an id attribute to later sibblings of a specific class */a {
  border: solid;
  display: none;
}

a:before {/* show them by their class names */
  display: inline-block;
  content: attr(class);
  padding:0.15em 0.5em;
}

#map {margin:1em;padding:1em;border:solid;}
#sili:checked ~ #map .sili,
#phos:checked ~ #map .phosp,
#gold:checked ~ #map .gold,
#allmines:checked ~ #map a {
  display: inline;
}

<input type="radio" name="mineRadio" id="allmines" checked> <label for='allmines'> All
</label>

<input type="radio" name="mineRadio" id="sili"><label for='sili'> Silicium
</label>

<input type="radio" name="mineRadio" id="phos"> <label for='phos'> Phosphate
</label>

<input type="radio" name="mineRadio" id="gold"> <label for='gold'> Gold
</label> The mines are circle-shaped elements on top of a map:
<div id="map">
<a href="#mine1" id="mine1" style="top: 74.72%; left: 25.89%; width: 1vw; height: 1vw;" class="sili phosp"></a>
<a href="#mine2" id="mine2" style="top: 45.25%; left: 45.21%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine3" id="mine3" style="top: 54.22%; left: 25.89%; width: 1vw; height: 1vw;" class="gold"></a>
<a href="#mine4" id="mine4" style="top: 41.75%; left: 75.34%; width: 1vw; height: 1vw;" class="phosp gold"></a>
<a href="#mine5" id="mine5" style="top: 78.72%; left: 25.49%; width: 1vw; height: 1vw;" class="sili phosp gold"></a>
<a href="#mine6" id="mine6" style="top: 47.42%; left: 88.65%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine7" id="mine7" style="top: 21.85%; left: 10.42%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine8" id="mine8" style="top: 14.21%; left: 32.85%; width: 1vw; height: 1vw;" class="sili gold"></a>
<a href="#mine9" id="mine9" style="top: 65.64%; left: 31.21%; width: 1vw; height: 1vw;" class="sili"></a>
</div>