如何不添加内联样式移除div的指定CSS规则并新增自定义类

问题根因 #

你当前代码不生效的核心原因是CSS选择器优先级不匹配，.wrap div的优先级（类+元素组合）高于单独的.acenter（单类选择器），所以就算给#tg加了acenter类，样式也会被原有规则覆盖。

解决方案（推荐，无副作用，无内联样式） #

只需要调整.acenter的CSS选择器，把优先级提高到和原有规则持平即可，JS逻辑完全不用修改，且不会影响#tgx的样式：

.wrap div{
  text-align:justify;
  text-align-last:left;
}

/* 调整后的选择器优先级和原有规则持平，且写在后面会自动覆盖原有样式 */
.wrap div.acenter{
  text-align:center;
  text-align-last:center;
}

JS保持原有逻辑即可：

$('button').on('click', function(){
  $('#tg').addClass('acenter');
});

该规则只会作用于.wrap下同时带有acenter类的div元素，#tgx没有添加该类，样式完全不受影响，也不会生成任何内联样式，完全符合你的需求。

应急方案（不推荐，仅做参考） #

如果不方便修改原有选择器结构，可以给.acenter属性加!important强制提高优先级，但会破坏全局样式优先级规则，不建议长期使用：

.acenter{
  text-align:center !important;
  text-align-last:center !important;
}

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