含链接的pretty-checkbox复选框无法勾选，求CSS解决方案

嘿，这个问题我之前在使用类似自定义复选框组件时也碰到过！核心原因是label里的锚点链接（<a>标签）点击事件优先级比伪元素生成的复选框更高，导致点击复选框区域时不小心触发了链接跳转，而非勾选操作。下面给你几个纯CSS的解决方案，都能完美解决这个问题：

方案一：调整伪元素与链接的层级关系 #

通过设置z-index，让复选框的伪元素层级高于锚点链接，这样点击复选框图标区域时，会优先触发复选框的勾选事件，点击链接文字时依然能正常跳转：

/* 给包含伪元素的state容器设置相对定位 */
.pretty .state {
  position: relative;
}

/* 让复选框伪元素的层级高于链接 */
.pretty .state:before {
  z-index: 2;
}

/* 给锚点链接设置相对定位和更低的层级 */
.pretty .state label a.checkbox-link {
  position: relative;
  z-index: 1;
}

方案二：让真实复选框覆盖图标区域 #

把原本被隐藏的真实<input>复选框调整到图标区域上方（透明不可见），这样点击图标时实际是点击到真实的复选框，直接触发勾选操作，完全避开链接的事件拦截：

/* 重置真实复选框的定位，覆盖在图标区域 */
.pretty input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; /* 根据你的复选框实际大小调整 */
  height: 20px;
  opacity: 0;
  z-index: 99;
  cursor: pointer;
}

这个方案优势更直接，因为真实复选框的点击事件是原生的，不会受到其他元素干扰，你只需要根据自己的复选框尺寸调整width和height即可。

小提示 #

如果使用方案二后布局出现偏移，可以检查.pretty或.state容器的position属性，确保它们是relative定位，这样真实复选框的绝对定位会基于这些容器计算位置。

内容的提问来源于stack exchange，提问作者Jesus Rodriguez