仅在一个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中放置一个范围样式表.

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

您可以使用@import外部样式.请注意,对于不支持它的浏览器,它会将样式应用于整个页面.所以你可能只想添加一个id你想要的div和样式,以实现兼容性.