css - 仅在一个 Div 中应用样式表

Question

我有一个要添加一些功能的网站。该网站有点过时，但我没有得到报酬来对整个网站进行大修，只是几页。因此，我在这些页面上使用了更现代的代码，但这些页面上仍然有旧代码。由于旧代码(将保留且不会被删除)，我有一些冲突的 CSS。

是否可以使整个样式表仅适用于 div 中的样式。

示例:

<div class="style-sheet-modern">

<!-- My Stylesheet applies only within this div -->

</div>

我的第一个想法是重命名我的 css 以使其包含在 div 中。示例:

.style-sheet-modern .conflicting-class{ /* styles */ }

但是，这是不可取的，因为有几百行 CSS，我不想遍历并重命名我的所有 CSS。也让以后的更新变得困难。

有没有办法将整个样式表应用到某个 div 而不是页面上的其他任何地方？

Answer 1

当然，在大多数现代浏览器中。放一个 scoped stylesheet在 div 内。

<div class="style-sheet-modern">
    <style scoped>
    .conflicting-class { ... }
    </style>
</div>

您可以使用@import 来使用外部样式。请注意，对于不支持它的浏览器，它会将样式应用于整个页面。因此，您可能只想将一个 id 添加到您想要的 div 并使用它来设置样式，以实现兼容性。