时间戳

首页 > 解决方案 > How can I refer a library only to a specific part of the HTML?

html - How can I refer a library only to a specific part of the HTML?

问题描述

I have the following code, which I found from a tutorial

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

and I would like to include it only to a specific part of my code and not the entire HTML file, is that possible?

Right now it's on the top of my code and it affects the entire page while I want it to affect only some things inside a div. Placing it inside the div doesn't seem to matter.

标签： htmlcss

解决方案

而不是链接样式表，而是使用导入并将其应用为范围样式：

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

由于许多浏览scoped器不再支持，如果您遇到浏览器支持问题，请改用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 的高度，请参考这个 Q/A

推荐阅读