限制页面内css的范围_Css - Fatal编程技术网

限制页面内css的范围

css

限制页面内css的范围,css,Css,我有一个页面，我可以用一个模式编辑器定义一个html模板，然后将这个模板放在一个div中（比如预览）。在这个文本区域内会有Html/css（可能是JSIDK）我的问题是，放在模板中的css会影响整个页面。用户知道他在模板中创建的div和东西，但不知道网页内容本身我想限制这个CSS的范围。我考虑将container div切换到iframe。但它看起来很复杂，因为我必须先把内容拿回来，然后再保存这里有好的解决办法吗这可以是一个模板： <!DOCTYPE html> <h

我有一个页面，我可以用一个模式编辑器定义一个html模板，然后将这个模板放在一个div中（比如预览）。在这个文本区域内会有Html/css（可能是JSIDK）

我的问题是，放在模板中的css会影响整个页面。用户知道他在模板中创建的div和东西，但不知道网页内容本身

我想限制这个CSS的范围。我考虑将container div切换到iframe。但它看起来很复杂，因为我必须先把内容拿回来，然后再保存

这里有好的解决办法吗

这可以是一个模板：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .container{
            border-style: none;
            margin-left: 4%;
            margin-right: 4%;
            }
            td{
            line-height: 150%;
            padding-top: 1%;
            padding-bottom: 1%;
            }
            .solidTableFull{
                //stuff
            }
            .solidTableMarge{
                //stuff
            }
            span{
            color: #0070c0;
            }
        </style>
    </head>
    <body style="zoom: 100%;">
                //stuff
                //stuff
                //stuff
    </body>
</html>


.集装箱{
边框样式：无；
左缘：4%；
保证金权利：4%；
}
运输署{
线高：150%；
垫面：1%；
垫底：1%；
}
.solidTableFull{
//东西
}
马奇先生{
//东西
}
跨度{
颜色：#0070c0；
}
//东西
//东西
//东西

您可以使容器中的所有CSS依赖于您的容器类。因此，例如，您需要为

#container div

创建样式，而不是为

div创建样式
这只会影响容器div中的div，而不是整个页面。
简单且可能是唯一的选择是为预览div提供一些ID（如果一次显示了更多实例，则为classname），然后使用相同的选择器为每个css规则加前缀

strong{color:#FF0000；}
#预览强{color:#0000FF；}

无预览内容
预览内容。
解决这种情况的一种方法是强制/指示用户在两个单独的文本区域中键入html和css
textarea one：过滤掉任何html
标记块（您可以使用jQuery（textarea\u内容）。查找（'style'）。删除（）；）
textarea 2：过滤任何html标记或使其保持简单
作为第一步，在呈现目标页面上的内容之前，可以使用div封装html内容，并分配动态生成的类名
然后，下一步是使用regexp将css定义提取为数组项，并预先添加我们在步骤1中所做的动态生成的类名
如果很难定义正确的regexp，可以使用string split（）方法。。。例如：csstextarea_content.split（'}'）

这应该会给你一些想法。。。我希望最终用户是定义css的人。。。（css和文本区域控制框中的html）因此，如果我们需要解析css并指定特定范围，那么这种想法就太复杂了，但是创建的css是由用户键入的。我不能告诉他在所有css规则之前添加容器。这个模板可以粘贴在html邮件中。如果我没弄错的话那就不行了对吧？你可以把它加在引擎盖下面。。。搜索sass或更少什么可以帮助你lot@EduardVoid你能详细说明一下吗？这个html不是完全由用户“编写”的（尽管他可以），它是通过“html编辑器”生成的。另一个（也是非常重要的）选项是隐藏DOM：请查看浏览器支持。我将深入探讨解析/更新css的想法，因为有多个评论在讨论这个问题。谢谢