将父类添加到样式标记中的CSS

我遇到了一个我正在创建的Web应用程序的问题。在页面的左侧，我有一个可编辑的区域，右侧是实时预览。实时预览区域实际上是一个包含特制字段的HTML文件，可以使用编辑区域进行操作。问题是因为用户HTML可以是他们想要的任何东西。一些CSS可能会流到我的页面的其余部分。用户做这件事并不少见：background：red;在他们的设计中，并导致我的整个页面变红。将父类添加到样式标记中的CSS

所以，解决这个问题（至少是我已经提出的方案）是将用户样式包装到父类中。然后在预览区域中拥有该父类。这样用户样式就不会流入我的设计中。我正在考虑像这样的东西用量少和jQuery：

//psuedo code 
less.Compile(".ParentClass { " + $("style").html() + "}");

但是，我找不到我可以使用任何这样的较少库。有谁知道一种方法，我可以将CSS父类添加到标记中的所有元素？

例子：

<div id="Preview"> 
    <style> 
    div { background: red; } 
    </style> 
    <div>I'm red</div> 
</div>

将成为：

<div id="Preview"> 
    <style> 
    #Preview div { background: red; } 
    </style> 
    <div>I'm red</div> 
</div>

编辑：我知道的风格确实应该在头上。但是，被操纵的html文件实际上将作为电子邮件发送。电子邮件客户端对CSS样式的支持最多只能算是粗制滥造，在某些情况下，最好放在身体中。它令人沮丧，但我必须与我的目标一起工作。

来源

2014-05-09 Piercy

样式标签只能出现在头部。假设它在另一个区域工作，但它不是一个HTML检查与W3C验证 –

@sudharsan同意的程序，但是，这实际上将用于电子邮件客户端（合法而不是垃圾邮件，别担心）。不幸的是，电子邮件客户端对风格标签的支持在头部比头部更好。电子邮件客户端让我难过。 – Piercy

试试这个。

我循环遍历dom中的所有样式元素，存储规则并在存储时从dom中移除它们。

然后构建较少的样式表，包括发现的样式规则。

最后，检索较少的脚本并解析样式规则，将它们添加到正文中，然后将主类设置为正文。

<html> 
    <head> 
    <script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> 
    </script> 
    <script type="text/javascript"> 
     $(function() { 
      //Loop through all style elements in dom, storing the rules and removing them from the dom when stored 
      var styles = ""; 

      $.each($("style"), function(index, value){ 
       styles += $(value).text(); 
       $(value).remove(); 
      }); 

      //Build the less stylesheet, including the discovered style rules 
      var lessStyles = ".master { " + styles + " }"; 

      //Retrieve less and parse the style rules, adding them to the body, then set the master class to the body 
      $.getScript("http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js",function(){ 
       var parser = new(less.Parser); 
       parser.parse(lessStyles, function (err, tree) { 
        if (err) { return console.error(err) } 

        var css = tree.toCSS(); 

        $("<style/>").html(css).appendTo("body"); 
        $("body").addClass("master"); 
       }); 
      }); 
     }); 
    </script> 
    <style type="text/css"> 
     h2{ 
      color:green; 
     } 
    </style> 
    </head> 
    <body> 
     <style type="text/css"> 
      .class2{ 
       color:red; 
      } 
     </style> 

     <h1 class="class2">H1</h1> 
     <h2>H2</h1> 
    </body> 
</html>

来源

2014-05-09 12:04:02 jdavies

将scoped属性添加到the <style> element。

浏览器支持目前是awful。

来源

2014-05-09 10:17:14 Quentin

不幸的是，我无法真正控制用户的HTML太多（部分因为我正在使用旧版产品）。我真的希望能够在CSS样式上动态添加父类。谢谢你的回答，虽然（我可以添加范围变量与jquery，我猜） – Piercy

风格标签应该只出现在头部分。假设它在另一个区域工作，但它不是一个使用w3c验证的html检查过程 –

@sudharsan - 添加一个范围属性允许它在HTML 5.1的主体中。 – Quentin

将父类添加到样式标记中的CSS

回答

相关问题