如何在jQuery函数中修改字体颜色？表单必填项高亮时字体样式设置及内联样式转独立CSS文件问题

我来帮你搞定这两个问题——红色高亮时字体颜色不生效的问题，以及把内联样式迁移到独立CSS文件的优化方案：

一、修复字体颜色不生效的问题 #

你当前的代码逻辑是先给所有.required元素设置绿色背景和白色字体，再把空的必填项改成红色背景，但字体颜色没生效大概率是CSS优先级冲突或者浏览器默认样式的影响。这里有两种解决思路：

思路1：明确设置错误项的字体颜色（不修改原逻辑） #

直接在过滤空项的代码里，同时指定背景色和字体颜色，确保内联样式的优先级覆盖其他规则：

$('#audit_submit').click(function () {
  // 重置所有必填项样式
  $('.required').css({
    'background-color': '#57ff89',
    'color': 'white'
  });
  // 给空必填项设置错误样式
  $('.required').filter(function () {
    return $.trim(this.value) === '';
  }).css({
    'background-color': '#ff4545',
    'color': 'white' // 明确指定，避免被其他样式覆盖
  });
});

思路2：用CSS类代替内联样式（更推荐） #

这种方式把样式和JS逻辑分离，不仅能解决颜色问题，还更便于维护：

$('#audit_submit').click(function () {
  // 先移除所有状态类，重置样式
  $('.required').removeClass('required-error').addClass('required-active');
  // 给空必填项添加错误类
  $('.required').filter(function () {
    return $.trim(this.value) === '';
  }).removeClass('required-active').addClass('required-error');
});

二、迁移到独立CSS样式表 #

把原来的内联样式全部放到单独的CSS文件中，代码结构更清晰：

/* 必填项激活状态（点击提交后非空项的样式） */
.required-active {
  background-color: #57ff89;
  color: white;
}

/* 必填项错误状态（空项的样式） */
.required-error {
  background-color: #ff4545;
  color: white;
}

/* 可选：给必填项添加默认样式，比如平时的边框提示 */
.required {
  border: 1px solid #ddd;
}

为什么推荐用CSS类？ #

• 样式和JS逻辑分离，后续修改颜色、样式时不用改动JS代码；
• CSS类的优先级更容易控制，避免内联样式过多导致的样式混乱；
• 代码可读性更高，其他开发者一眼就能看懂不同状态对应的样式。

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