将外部 css 的范围限制为仅特定元素？
[英]Limit scope of external css to only a specific element?
问题描述
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.
我正在创建一个移动模拟器，它使用 100% 的 javascript、HTML5 和 CSS 在 Web 浏览器中模拟 iPhone（以及以后的其他设备）的外观和功能，并且模拟器仅使用客户端代码即可完全运行。
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 .css file to apply only to objects within the <div> screen?我的问题是：有没有办法限制外部.css文件的“范围”仅适用于<div>屏幕中的对象？ 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?如果不是我将它注入到页面的<head>中，而是将它注入到<div>屏幕中的<div> <style>元素中，会有什么不同吗？
6 个解决方案
解决方案1
42 已采纳
UPDATE Support 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。
解决方案2
30 2015-06-29 12:41:08
Simply wrap all you css code inside the selector for parent element, say it's a div with id of foo you'd do the following:只需将所有 css 代码包装在父元素的选择器中，假设它是一个 id 为foo的 div，您将执行以下操作：
div#foo{
//All your css
}
And convert it as less to css , it will prepend the right selectors.并将其转换为less为css ，它将预先添加正确的选择器。 Note that you'll need to take care manually of things like @media queries and so on.请注意，您需要手动处理@media 查询等内容。
解决方案3
3 2016-06-15 05:06:01
While writing this, the <style scoped> is deprecated by the Chrome team.在编写本文时， <style scoped>已被 Chrome 团队弃用。 As a result I experimented with some approaches and released https://github.com/thgreasi/jquery.scopeLinkTags .结果我尝试了一些方法并发布了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.注意：只有在无法控制导入的 CSS 文件的情况下才应该使用这种方法。 If you can use SASS/LESS/anything to pre-process your CSS, you should prefer that.如果你可以使用 SASS/LESS/anything 来预处理你的 CSS，你应该更喜欢它。
解决方案4
1 2016-07-25 06:38:08
A simple way is adding pre-class before all selector in css file.一种简单的方法是在 css 文件中的所有选择器之前添加预类。
I find a grunt script can do this:我发现一个 grunt 脚本可以做到这一点：
https://github.com/ericf/grunt-css-selectors https://github.com/ericf/grunt-css-selectors
解决方案5
0 2021-05-28 20:11:51
This is how i do it if not using preprocessor in my project.如果在我的项目中不使用预处理器，我就是这样做的。 Search for a online preprocessor then load copy paste the css under the parent class/id搜索在线预处理器，然后加载复制粘贴父类/id 下的 css
.parent{
// copy paste here
}
Example例子
- Find a preprocessor for example https://beautifytools.com/scss-compiler.php works very well for me (I have no affiliation with the given link)找到一个预处理器，例如https://beautifytools.com/scss-compiler.php对我来说效果很好（我与给定的链接没有任何关系）
- if you are using from a URL add the URL using the load URL button.如果您从 URL 使用，请使用加载 URL 按钮添加 URL。
- Wrap the css code under parent and hit compile then minify.将 css 代码包裹在 parent 下并点击 compile 然后缩小。
解决方案6
0 2022-01-09 15:05:48
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.