我正在创建一个移动模拟器,它使用100%的javascript,HTML5和CSS模拟iPhone(以及其他设备以后)的外观和功能,模拟器完全可以使用客户端代码.
在尝试完成此任务时,只需对原始应用程序项目本身进行必要的修改即可在模拟器中托管,我将<script>和<link>标签注入页面的头部,然后将html加载到<div>屏幕中.
问题是,当我加载一个新的css文件时,它(显然)会覆盖我用来设置页面样式的文件,因此一些元素会受到影响(除了背景改变颜色).
我的问题是:有没有办法限制外部.css文件的"范围" 只适用于<div>屏幕内的对象？如果不是将它注入<head>页面中,我会将它注入屏幕中的<style>元素,这会有<div>什么不同吗？
我有一个现有的网站,其中包含许多旧页面和表格,我正在尝试逐步过渡到CSS.我想使用Twitter Bootstrap样式表 - 特别是表单的样式 - 但仅限于我明确请求它们的页面部分.例如,我可能会在div中包围整个表单,如下所示:
<div class="bootstrap">
<!-- everything in here should have the Bootstrap CSS applied -->
<form>
<p><label for="text_input">Label</label><input type="text" id="text_input" /></p>
</form>
</div>
我希望所有其他形式保持与现在相同,因为我无法同时更改所有形式.有一个简单的方法吗？我可以浏览Bootstrap CSS中的每一个样式并添加一个父选择器(例如'p'将成为'div.bootstrap p'),但这需要很长时间,并且很容易错过样式.
编辑:如果这样的事情不可能,有没有一个免费工具可以从文件中提取所有样式,添加前缀,然后再将它们保存回来？
我在 Blogger 上有一个博客，并且有一些小部件。我想知道小部件在主页上的显示是否可能与其他页面不同？
例如一个盒子
/* on home page, it should appear like this */
#box {
background: green;
width:200px; height:100px;
}
/* on other pages, it should appear like this */
#box {
background: red;
width:200px; height:200px;
}