如何通过jQuery优雅地用新css覆盖旧css？

我有一个div元素，带有css-->class 1，如下代码所示：

<style type="text/css">
     .class1 {width: 100px !important;padding-top:10px;margin-bottom: 22px;}
</style>

<div class="class1"></div>

然而，我们的技术负责人认为这是非常黑客的，并要求我做它作为一个样式表的一部分，而不是

他建议我可以在div元素上附加一个marker类，以触发不同的行为

因此，我的计划是添加新的css类-->class2，然后尝试将这个新类添加/应用到div元素，如下所示：

<style type="text/css">
      .class2 {width: 300px !important;}
</style>

$('div').find(".class1").each(function () {
      $(this).addClass("class2");
 });

但是，如果class1有许多设置/属性，这意味着我需要将它们复制到class2中，以保持结果不变，除了宽度

---

如果class2只包含新的宽度设置，有没有优雅的方法“仅”覆盖class1的宽度设置？

我将按如下方式定义CSS规则：

.class1.class2 { width: 300px !important};

您可以将其添加到嵌入式样式表或外部样式表中 样式表

然后可以使用JavaScript将新选择器

.class2

添加到感兴趣的元素中

带有

.class1.class2

的CSS规则将比

.class1

具有更高的选择性，并覆盖宽度设置

---

使用这种方法，您不必从

class

属性中删除

class1

，也不必太担心

.class1

的规则是在

之前还是之后定义的

.class1.class2 { width: 300px !important};

您可以将其添加到嵌入式样式表或外部样式表中
样式表

然后可以使用JavaScript将新选择器
.class2
添加到感兴趣的元素中

带有
.class1.class2
的CSS规则将比
.class1
具有更高的选择性，并覆盖宽度设置

使用这种方法，您不必从
class
属性中删除
class1
，也不必太担心
.class1
的规则是在
.class1.class2
之前还是之后定义的，请删除该属性！在这两个类中都很重要，将class2放在文件中的class1下定义它们，它应该可以工作。@thinh.lam，有没有办法不编辑class1定义，因为我们在其他场景/函数中仍然需要它。删除！在这两个类中都很重要，将class2放在文件中的class1下定义它们，它应该可以工作。@thinh.lam，我们有没有办法不编辑class1定义，因为我们在其他场景/函数中仍然需要它。
.class1.class2 { width: 300px !important};