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'文件中的第一件事。

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