点击复选框为VAT数值添加删除线的CSS实现问题咨询

问题根源 #

你使用的**相邻兄弟选择器+**存在匹配限制：只能选中和当前元素属于同一个父元素、位置紧挨着的后置同级节点。你的代码中.vat-checkbox是嵌套在<td class="vat-check">内部的子元素，.vat-value是和第一个td同级的独立节点，完全不满足匹配条件，因此样式不生效。

可行解决方案 #

方案1：CSS :has伪类实现（现代浏览器兼容，无需修改原有HTML结构） #

Chrome 105+、Firefox 121+、Safari 15.4+均支持该属性，直接替换CSS代码即可：

.vat-check:has(.vat-checkbox:checked) + .vat-value {
  text-decoration: line-through;
}

方案2：JS实现（全浏览器兼容） #

如果需要适配不支持:has的旧版本浏览器，添加以下JS代码即可实现需求：

const vatCheckbox = document.querySelector('.vat-checkbox');
const vatValue = document.getElementById('vat');
vatCheckbox.addEventListener('change', function() {
  vatValue.style.textDecoration = this.checked ? 'line-through' : 'none';
});

内容的提问来源于stack exchange，提问作者Dev Devoo