Question

我有以下代码，我从教程中找到了

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer- 
 reset/2.0/reset.min.css">

我想将它仅包含在我的代码的特定部分而不是整个HTML文件中，是否可能？

现在它位于我的代码顶部，它会影响整个页面，而我希望它只影响div中的一些内容。将它放在div中并不重要。

Answer 1

而不是链接样式表，使用import并将其应用为作用域样式：

<div>
    <style scoped>
        @import "https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css";
    </style>
</div>

由于scoped为no more supported by many browsers，如果您遇到浏览器支持问题，请改用Jquery Scoped Plugin。

作为一个hacky解决方案，请在页面的该部分使用iFrame，但是如果要将css-reset应用于页面的主要部分作为正文边距或滚动条，这将无济于事。这是使用iframe的主页和子页的简单示例：

主页：

<html>
    <body>
       Main Content part 1
       <iframe src="subPage.html" style="border:0;width:100%;">
       Main Content part 2
    </body>
</html>

iframe的来源（subPage.html）：

<html>
    <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    </head>

    <body>
       Styled content goes here.
    </body>
</html>

最后，如果您有动态内容但无法确定iframe的高度，请参阅this Q/A

如何仅将库引用到HTML的特定部分？

1 个答案: