我有一个网站,我正在添加一些功能.该网站有点过时,但我没有报酬整个网站,只有几页.因此我在这些页面上使用了更现代的代码,但这些页面上仍然存在旧代码.由于旧代码(将保留并且不被删除)我有一些冲突的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中应用整个样式表而不是在页面上的任何其他位置？
解决方法
当然,在大多数现代浏览器中.在div中放一个
scoped stylesheet.
<div class="style-sheet-modern">
<style scoped>
.conflicting-class { ... }
</style>
</div>
您可以使用@import来使用外部样式.请注意,对于不支持它的浏览器,它会将样式应用于整个页面.因此,为了兼容性,您可能只想为您想要的div添加一个id并设置样式.
