仅在一个 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

当然，在大多数现代浏览器中。在 div 中添加 scoped stylesheet。

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

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

Answer 2

为什么不给<div> 一个ID？

那么您可以使用特异性来仅覆盖该 div 中的类/ID？

IE：

<div id="style-sheet-modern"> 
    <div class="my-class"></div>
    <div class="etc"></div>
</div>

然后您可以像这样定位“现代” div 中的所有样式：

#style-sheet-modern .my-class{
    color:black;
} 
#style-sheet-modern .etc {}

不会有浏览器支持问题。

如果您使用的是 less 或 sass 之类的东西 - 您甚至可以将它放在一个名为“style-sheet-modern.less”的单独文件中，或者任何您想要命名的文件中，然后在主样式的底部将其 @import文件。此包含需要位于文件的最后，以便覆盖可应用于这些相同样式的其他样式。

如有必要，您也可以使用通配符重置#style-sheet-modern 中的所有样式，如下所示：

#style-sheet-modern * {
    reset: stuff; //obviously not the actual css
}

这些样式的重置将是您的 'style-sheet-modern.*ss' 文件中的第一件事。

正如我之前提到的，没有浏览器支持问题。