为特定DIV加载外部CSS

Question

所以基本上我有一个拥有自己CSS的页面.在我的服务器上,我有一个不同CSS样式文件的文件夹,所以我希望在我的页面上有一个"预览"窗口.我可以以某种方式,也许使用javascript,只将外部CSS文件应用于某个DIV,而不是整个页面,以便我可以获得自定义CSS文件的"预览"？我宁愿不使用iframe.

Answer 1

像Quentin所说,你可以使用后代选择器来限制范围.像较少的东西可以帮助很多.例如,我想将"bootstrap.css"仅适用于"my.less"中的#MyDiv:

#MyDiv {
  @import "bootstrap.less";
}

应将"bootstrap.css"重命名(或链接)为"bootstrap.less".跑:

lessc my.less my.css

将#MyDiv添加到导入文件中的每个选择器.

Answer 2

CSS适用于整个文档.

如果要限制范围,则需要使用后代选择器.

例如 #id_of_div .the .rest .of .the .selector {}

你必须将它应用于每个选择器,并考虑到组(因此它不仅仅是为整个样式表添加前缀并且每个都加上后缀})

您还可以找到适用于预览的主文档样式表.

框架可能是解决此问题的最佳方法.

Answer 3

对于我的一个项目,我需要完全相同的东西,但在CSS版本2中也得到支持.
经过网络上的长时间搜索,我没有找到任何有用的东西,所以我决定使用JavaScript创建这个功能实际上可以将整个css应用于DOM中的特定元素.

只需调用函数applyCSSFileToElement,如下所述(依赖于jQuery库):

function renderCSSForSelector(css, selector) {
    return ((css+"")||"").replace(/\n|\t/g, " ")
      .replace(/\s+/g, " ")
      .replace(/\s*\/\*.*?\*\/\s*/g, " ")
      .replace(/(^|\})(.*?)(\{)/g, function($0, $1, $2, $3) {
        var collector = [], parts = $2.split(",");
        for (var i in parts) {
            collector.push(selector + " " + parts[i].replace(/^\s*|\s*$/, ""));
        }
        return $1 + " " + collector.join(", ") + " " + $3;
    });
}

function applyCSSToElement(css, elementSelector) {
    $("head").append("<style type=\"text/css\">" + renderCSSForSelector(css, elementSelector) + "</style>");
}

function applyCSSFileToElement(cssUrl, elementSelector, callbackSuccess, callbackError) {
    callbackSuccess = callbackSuccess || function(){};
    callbackError = callbackError || function(){};
    $.ajax({
        url: cssUrl,
        dataType: "text/css",
        success: function(data) {
            applyCSSToElement(data, elementSelector);
            callbackSuccess();
        },
        error: function(jqXHR) {
            callbackError();
        }
    })
}

功能说明:

• renderCSSForSelector - 实际上为每个样式定义添加一个选择器.
• applyCSSToElement - 获取CSS源数据,应用renderCSSForSelector并将其注入HEAD标记.
• applyCSSFileToElement - 将CSS文件(cssUrl)应用于DOM中的特定区域(elementSelector).成功加载文件并应用CSS后,将调用callbackSuccess.该callbackError当有一个错误加载CSS文件被调用.

祝好运!