如何使用jQuery设置伪元素样式？复选框伪元素颜色动态修改失效求助

嘿，这个问题我太熟了！你现在遇到的核心问题是：伪元素（比如::before）根本不是DOM树中的实际节点，jQuery的.css()方法只能作用于真实存在的DOM元素，所以直接通过选择器定位::before来设置样式肯定不会生效的。

我给你几个实用的解决方案，按推荐程度排序：

方案1：使用CSS自定义属性（最推荐） #

这是现代CSS最灵活的方式，通过变量来动态控制伪元素样式：

1. 先修改你的基础CSS，把固定颜色换成自定义变量：

input[type=checkbox]:checked + label::before {
  background-color: var(--checkbox-checked-color, rgb(186,135,200)); /* 第二个值是默认回退色 */
  border: none;
  box-shadow: none;
}

2. 然后用jQuery给任意父元素（比如body或者目标复选框的容器）设置这个变量：

item.color = item.options.color;
// 如果想全局生效，给body设置
$('body').css('--checkbox-checked-color', item.color);

// 如果只想针对某一组复选框，给它们的父容器设置
// $('.target-checkbox-group').css('--checkbox-checked-color', item.color);

这样伪元素会自动继承父元素的变量值，颜色就能动态更新了。

方案2：动态插入style标签 #

如果你的场景需要更精准的选择器控制，可以动态生成样式规则插入到页面：

item.color = item.options.color;

// 先移除之前添加的动态样式，避免重复
$('style#dynamic-checkbox-style').remove();

// 创建新的style标签，写入目标样式
const dynamicStyle = $(`
<style id="dynamic-checkbox-style">
  input[type=checkbox]:checked + label::before {
    background-color: ${item.color} !important; /* 必要时加!important覆盖原有优先级 */
  }
</style>
`);

// 把样式插入到head中
$('head').append(dynamicStyle);

注意：如果原有CSS的选择器优先级更高，可能需要用!important或者优化选择器（比如给父元素加类来提高优先级）。

方案3：结合动态类名 #

如果你的颜色选项是固定的几个，也可以提前定义好类，然后动态切换类：

1. 先在CSS中定义不同颜色的类：

input[type=checkbox]:checked + label.purple::before {
  background-color: rgb(186,135,200);
}
input[type=checkbox]:checked + label.blue::before {
  background-color: rgb(50,150,250);
}
/* 更多颜色类... */

2. 然后用jQuery切换label的类：

// 假设item.options.color对应的是类名（比如'blue'）
item.color = item.options.color;
// 先移除旧类，再添加新类
$('input[type=checkbox]:checked + label').removeClass('purple blue').addClass(item.color);

这个方法适合颜色数量有限的场景，代码更直观。

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