仅在一个Div中应用样式表

问题描述

我有一个网站要添加一些功能.该网站有点过时了，但是我并没有付钱去检修整个网站，只有几页.因此，我在这些页面上使用了更现代的代码，但是这些页面上仍然有旧代码.由于旧代码(将保留并且不会被删除)，我有一些冲突的CSS.

I have a site I am adding some functionality to. The site is a bit outdated but I am not being paid to overhaul the entire site, just a few pages. Because of this I am using more modern code on these pages but there is still old code on these pages. Because of the old code (which will stay and not be removed) I have some CSS that conflicts.

是否有可能使整个样式表仅应用于div中的样式.

Is it possible to make an entire stylesheet only apply to styles within a div.

示例:

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

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

</div>

我的第一个想法是将我的CSS重命名为div.示例:

My first thought was to just rename my css to fall within the div. Example:

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

但是，这是不理想的，因为有几百行CSS，我不想遍历并重命名我的所有CSS.也使将来难以更新.

However, this isn't desirable because there are a few hundred lines of CSS and I don't want to go through and rename all of my CSS. Also makes it difficult to update in the future.

是否可以在某个div内而不是页面上其他任何地方应用整个样式表?

Is there a way to apply an entire stylesheet within a certain div and not anywhere else on the page?

推荐答案

当然，在大多数现代浏览器中.在div内放一个作用域样式表.

Sure, in most modern browsers. Put a scoped stylesheet WITHIN the div.

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

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

You can use @import to use external styles. Note, for browsers that don't support it, it will apply the style to the entire page. So you probably just want to add an id to the div you want and style with that, for compatibility.

这篇关于仅在一个Div中应用样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！