Html 带有外部样式表的 Div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16356939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div with external stylesheet?
提问by LethalPapercut
I have been given an external stylesheet (.css file) that may not altered in any way whatsoever. However I need to apply this stylesheet to a single div and therefore the contents of the div in my already existing webpage. I am currently reading the contents of the stylesheet as text into a blank style tag (using .innerHTML) within the div I need to affect but this still affects the entire web page rather than just the single div. Could someone please help with this?
我得到了一个外部样式表（.css 文件），它可能不会以任何方式改变。但是，我需要将此样式表应用于单个 div，因此我现有网页中的 div 内容。我目前正在将样式表的内容作为文本读取到我需要影响的 div 中的空白样式标签（使用 .innerHTML）中，但这仍然影响整个网页，而不仅仅是单个 div。有人可以帮忙吗？
采纳答案by Gareth Cornish
The IFRAME solution works like this:
IFRAME 解决方案的工作方式如下：
In your main HTML file, you'll have your DIV:
在您的主 HTML 文件中，您将拥有您的 DIV：
<div id="myspecialdiv">
<iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>
Style that as you need it. The divcontent.html file should be a complete HTML file, including the content of the DIV tag, and a LINK using your external stylesheet:
根据需要设计样式。divcontent.html 文件应该是一个完整的 HTML 文件，包括 DIV 标签的内容和一个使用外部样式表的链接：
<html>
<head>
<link rel="stylesheet" href="path/to/external/stylesheet.css" />
</head>
<body>
<!-- The contents of your DIV -->
</body>
</html>
回答by Piet van Dongen
If you can work with HTML5, you could try using scoped styles. You could include the CSS inside the div, having it affect only its parent:
如果您可以使用 HTML5，您可以尝试使用范围样式。您可以在 div 中包含 CSS，使其仅影响其父级：
<div>
<style scoped>
// Styles here
</style>
</div>
回答by Javier del Saz
This will helps you a lot:
这会对你有很大帮助：
http://css-tricks.com/saving-the-day-with-scoped-css/
http://css-tricks.com/saving-the-day-with-scoped-css/
Applies only style to a certain delimited escope. Good luck!
仅将样式应用于某个带分隔符的 escope。祝你好运！
IMHO better than the iframe solution..
恕我直言，比 iframe 解决方案更好..
related: Limit scope of external css to only a specific element?
回答by Gareth Cornish
If you have access to server-side scripting (eg: PHP), you could create a script that loads the external stylesheet, and appends a class name in front of every entry. Then apply this class to your DIV tag. So, if the CSS includes:
如果您有权访问服务器端脚本（例如：PHP），您可以创建一个加载外部样式表的脚本，并在每个条目前附加一个类名。然后将此类应用于您的 DIV 标签。所以，如果 CSS 包括：
p { font-size: 12px; }
You'd modify that to:
您可以将其修改为：
.mydiv p { font-size: 12px; }
And format your DIV as
并将您的 DIV 格式化为
<div class="mydiv">...</div>
You would then load the script as a stylesheet, rather than the external stylesheet directly.
然后您将脚本作为样式表加载，而不是直接加载外部样式表。
<link rel="stylesheet" href="path/to/internal/script.php" />
回答by Nitesh
I suggest you can leave the external style sheet as it is and create an internal style sheet with the classes that you want from the external stylesheet to affect your single div and just rename it and apply those renamed classes to the div. The renaming is because the attributes of those classes may affect elements already existing on the page from external stylesheets.
我建议您可以保留外部样式表，并使用您希望从外部样式表中影响单个 div 的类创建一个内部样式表，然后重命名它并将这些重命名的类应用到 div。重命名是因为这些类的属性可能会影响页面上已经存在的来自外部样式表的元素。
<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>
Hope this helps.
希望这可以帮助。
回答by Fancyoung
scopedis a good idea, but has browser compatible issue.
scoped是个好主意，但存在浏览器兼容问题。
I solve this problem by adding pre-class before all selector in css file:
我通过在 css 文件中的所有选择器之前添加 pre-class 来解决这个问题：
回答by NWard
I assume that the style specifications inside the external file are not contained in classes or IDs, but are they blanket adjustments to tags like <p>(and thus it cannot be included in your page headers). Include your div in a <style scoped>tag and import the .css file there. See: http://css-tricks.com/saving-the-day-with-scoped-css/
我假设外部文件中的样式规范不包含在类或 ID 中，但它们是否对标签进行了全面调整<p>（因此它不能包含在您的页眉中）。将您的 div 包含在<style scoped>标签中并在那里导入 .css 文件。请参阅：http: //css-tricks.com/saving-the-day-with-scoped-css/
回答by Morpheus
You could assign a CSS prefix to target the section of your document you want to style.
您可以指定一个 CSS 前缀来定位要设置样式的文档部分。
