Javascript 如何组合2个css文件以避免2个css文件之间的冲突？

我正在为同一个项目处理两个单独的html文件，最终这些文件将进入主页。我的问题是css文件，因为它们有许多相同的元素，但是它们看起来不同，并且会发生冲突

我的问题是，什么是合并这个css文件的最好方法，这样就不会有任何问题

这是CSS文件1 @导入url(https://fonts.googleapis.com/css2?family=Roboto&display=swap); @导入url(https://fonts.googleapis.com/css2?family=Lato&display=swap); * { 保证金：0； 填充：0； 字体系列：Roboto，无衬线 } html{ 身高：100% } 身体{ 身高：100%； 显示器：flex； 弯曲方向：立柱； 可见性：可见 } a{ 文字装饰：无； 字体大小：12px； } 李{ 填充：10px； 光标：指针； 背景色：透明； 颜色：#ffffff； } 李：悬停{ 背景色：#87cefa； 颜色：#003580； } h4{ 文本对齐：居中； 字体大小：33px； 字号：333； 颜色：#003580； 填充：12px } /* --------------------------------------- --------------组成部分---------------- ----------------------------------------*/ 标签{ 填充：6px； 字体大小：15px； 字号：700； 文本对齐：居中； 宽度：120px； 颜色：#000 } 保险商实验室{ 列表样式类型：无； 左侧填充：21px； } ul.horizontal， 水平线{ 显示器：flex； 列表样式类型：无； 颜色：白色； } 钮扣{ 背景色：#ffffff； 边框：1px实心#003580； 颜色：#003580； 对齐项目：居中； 边界半径：6px； 填充：0 25px； 字体系列：拉托，无衬线； 字体大小：15px； 字号：700； 文字装饰：无； 文本对齐：居中； 光标：指针； 空白：nowrap； 调整大小：无； 大纲：0； 宽度：180px； 高度：45像素 } 按钮：悬停{ 背景色：#87cefa； 颜色：#003580； } 我{ 利润率：0 12px 0 12px； } img{ 最大宽度：150px； 最大高度：150像素 } 输入{ 宽度：150px； 自对准：居中； 字体大小：15px； 字号：700； 文字装饰：无； 光标：指针； 调整大小：无； 大纲：0； 背景色：透明； 边界：透明； 文本对齐：居中 } ：：占位符{ 颜色：#FFFFFF； 不透明度：1； } 选择， 选择白色{ 字体大小：15px； 背景色：透明； 边界：透明； 字号：700； 填充：6px； 光标：指针； } 选择白色{ 颜色：#FFFFFF； } 选择。白色：焦点{ 颜色：#003580； } /* --------------------------------------- ---------------布局----------------- ----------------------------------------*/ 标题{ 显示器：flex； 柔性包装：nowrap； 证明内容：之间的空间； 对齐项目：居中； 填充：9px； 背景色：#003580； 高度：45px； } .content_容器{ 显示器：flex； 柔性包装：nowrap } .侧导航栏{ 高度：90vh； 弹性：1； 背景色：#003580； 边框底部：6px实心#003580 } .右侧内容{ 显示：块； 弹性：4 } .所有_段_容器{ 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 证明内容：中心； } .所有_段_集装箱段{ 利润底部：18%； 显示：无； 宽度：90%； 身高：90%； } .profile_包装器{ 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； } .properties\u包装器{ 显示器：flex； 证明内容：中心； 对齐项目：居中； 柔性包装：nowrap } .properties\u包装器div{ 字体大小：12px； 字号：333； 文本对齐：居中 } .U包装纸， .U包装纸， .settings\u包装器， .提供包装纸， .messages\u包装器{ 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 柔性包装：nowrap； } .settings\u包装器按钮， .U包装器按钮{ 利润上限：21px； } ##################这是CSS文件2 @导入url(https://fonts.googleapis.com/css2?family=Roboto&display=swap); @导入url(https://fonts.googleapis.com/css2?family=Lato&display=swap); * { 保证金：0； 填充：0； 字体系列：Roboto，无衬线 } html{ 身高：100% } 身体{ 身高：100%； 显示器：flex； 弯曲方向：立柱； 可见性：可见 } h4{ 利润率：9px； 左侧填充：9px； 填充顶部：6px； 边框顶部：1px实心#eef0f1 } h5{ 颜色：#fff； 字号：12px } h5.h5_下拉列表{ 边距：5px 0-5px 0 } 标签{ 左侧填充：12px； 光标：指针 } 钮扣{ 字体大小：16px； 字号：700； 颜色：#000； 背景色：#fff； 边界：0； 边界半径：8px； 高度：45px； 文本最后对齐：居中； 右边距：10px； 调整大小：无； 大纲：0； 光标：指针； 最小宽度：100px } 纽扣，红色{ 光标：指针； 背景色：#e00000； 颜色：#fff； 边框：薄实线#e00000 } 按钮。红色：悬停{ 背景色：#f23d3d } 输入[类型=复选框]{ 光标：指针 } 输入[类型=编号]， 输入[类型=文本]{ 字体大小：16px； 字号：700； 颜色：#000； 背景色：#fff； 边界：0； 边界半径：8px； 高度：45px； 文本最后对齐：居中； 右边距：10px； 调整大小：无； 大纲：0； 最小宽度：300px； 文本对齐：居中； 光标：自动 } 挑选{ 字体大小：16px； 字号：700； 颜色：#000； 背景色：#fff； 边界：0； 边界半径：9px； 高度：45px； 文本最后对齐：居中； 调整大小：无； 大纲：0； 光标：指针； 填充：3倍； 利润率：6px } .选择城市{ 右边距：-15px } .search\u box\u category\u selector\u flex\u container{ 显示器：flex； 证明内容：中心； 对齐项目：居中； 文本对齐：居中； 最大宽度：51%； 剩余利润：21% } .search\u box\u category\u selector\u flex\u container div{ 边框：1px纯色灰色； 弹性：1； 字体大小：12px； 字号：333； 边界半径：6px； 填充：12px； 光标：指针； 边缘底部：-6px； 右边距：3倍 } .search\u box\u flex\u主容器{ 显示器：flex； 证明内容：中心； 柔性包装：nowrap； 高度：99px； 背景色