限制影响 DIV 或容器内部的 CSS 文件

Question

我正在开发一个大型应用程序。开发很久以前就开始了。该应用程序中有大约 500 多个 HTML 页面。现在计划重新设计每个页面。请找到下面的 CSS 层次结构。

|
|- bootstrap3.css
|- framework.css 
|- theme.css
|- select2.css
|- bootstrap5.css ( New for revamped parts only)
|- rev_style.css ( New for revamped parts only)

希望在改造完成后删除旧的 CSS 文件。

新的改造部分位于新类别下，例如

<div class="rev_02"></div>

。新的 SASS 文件正在使用这个超类层次结构创建。

现在的问题是旧的 CSS 文件正在影响新修改的组件的样式和对齐方式。为了避免这种情况，需要更多带有

!important

标签和 CSS 行的代码。

有什么方法可以限制 HTML 页面中 DIV 或容器内的旧 CSS 文件吗？

Answer 1

有一些方法可以覆盖旧的样式，例如使用 CSS 模块或 Sass 在升级的设计中嵌套类。目标是增加 div 或容器上使用的类或 id 的 CSS 特异性，或者在资源允许的情况下限制整个样式。我提供了有关 CSS 特异性、CSS 模块和 Sass 嵌套的文章链接，可以帮助您理解这些概念。我希望这些资源能帮助您解决问题。

• CSS 特异性

• CSS 特异性

• CSS 模块

• CSS 模块

• SASS 嵌套

• SASS 嵌套