Html 将外部 css 的范围限制为特定元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17667874/
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
Limit scope of external css to only a specific element?
提问by SnareChops
I am creating a mobile simulator that mocks the appearance and functionality of an iPhone (and other devices later) in a web browser, using 100% javascript, HTML5, and CSS, with the simulator fully functional with only client side code.
我正在创建一个移动模拟器，它在 Web 浏览器中模拟 iPhone（以及以后的其他设备）的外观和功能，使用 100% javascript、HTML5 和 CSS，模拟器功能齐全，只有客户端代码。
While trying to accomplish this task with as little modification as necessary to the original app projects themselves to be hosted in the simulator, I am injecting the <script>and <link>tags into the head of the page, then loading the html into a <div>screen.
在尝试通过对要托管在模拟器中的原始应用程序项目本身进行尽可能少的修改来完成此任务时，我将<script>和<link>标记注入页面的头部，然后将 html 加载到<div>屏幕中。
The problem is that when I load in a new css file, it (obviously) overrides the one I'm using to style the page, and therefor some elements are affected (ex the background changes color).
问题是，当我加载一个新的 css 文件时，它（显然）会覆盖我用来设置页面样式的那个，因此某些元素会受到影响（例如背景更改颜色）。
My question is: Is there any way to limit the "scope" of an external .cssfile to apply only to objects within the <div>screen? Would it make any difference if instead of me injecting it into the <head>of the page, I inject it into a <style>element in the <div>screen?
我的问题是：有什么办法可以将外部.css文件的“范围”限制为仅适用于<div>屏幕内的对象？如果不是我将它注入<head>页面的 ，而是将它注入屏幕中的<style>元素，这会有<div>什么不同吗？
采纳答案by SnareChops
UPDATESupport for this feature has been dropped. Please seek other options
更新已取消对此功能的支持。请寻求其他选择
Original Post:
原帖：
You may want to look at scoped styles; see http://css-tricks.com/saving-the-day-with-scoped-css/.
您可能想查看范围样式；请参阅http://css-tricks.com/saving-the-day-with-scoped-css/。
The basic idea is
基本思想是
<div>
<style scoped>
@import "scoped.css";
</style>
</div>
However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.
但是，您在浏览器支持方面处于最前沿。请参阅http://caniuse.com/style-scoped。
One alternative would be to use an iframe.
一种替代方法是使用 iframe。
回答by Juan Cortés
Simply wrap all you css code inside the selector for parent element, say it's a div with id of fooyou'd do the following:
只需将所有 css 代码包装在父元素的选择器中，假设它是一个带有 id 的 div，foo您可以执行以下操作：
div#foo{
//All your css
}
And convert it as lessto css, it will prepend the right selectors. Note that you'll need to take care manually of things like @media queries and so on.
并将其转换为less对css，它会在前面加上正确的选择。请注意，您需要手动处理@media 查询等内容。
回答by Thodoris Greasidis
While writing this, the <style scoped>is deprecated by the Chrome team.
As a result I experimented with some approaches and released https://github.com/thgreasi/jquery.scopeLinkTags.
Note: you should only have to use this approach in case that you can't control the imported CSS file. If you can use SASS/LESS/anything to pre-process your CSS, you should prefer that.
在撰写本文时，<style scoped>Chrome 团队已弃用。结果我尝试了一些方法并发布了https://github.com/thgreasi/jquery.scopeLinkTags。注意：只有在无法控制导入的 CSS 文件的情况下才应该使用这种方法。如果你可以使用 SASS/LESS/anything 来预处理你的 CSS，你应该更喜欢它。
回答by Fancyoung
A simple way is adding pre-class before all selector in css file.
一种简单的方法是在 css 文件中的所有选择器之前添加预类。
I find a grunt script can do this:
我发现一个 grunt 脚本可以做到这一点：
