如何设置z-index的优先级而使元素先后触发

Question

背景:在纯用css实现导航栏的切换样式，想先用input的checked属性来添加被触发元素的样式和动画，想用a锚点功能实线导航切换。

<li>
     <a href="#panel-1">pomelo</a>
     <input type="radio" checked="checked" />
</li>

问题：通过css设置，使得a和input重叠在一栏，那么该如何设置能够产生 先触发input的checked，再触发a的链接的效果
（我对Z-index不是很了解，不知道是不是设置了z-index就会让优先级高的元素覆盖掉优先级低的元素，从而没法触发低优先级的元素？）

Answer 1

建议使用JS去控制页面元素的现实与隐藏。

Answer 2

不能用a里边包含 input 吗