Question

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

Answer 1

像昆汀说的那样，你可以使用后代选择器来限制范围。像less之类的东西可以提供很多帮助。例如，我想将“bootstrap.css”仅适用于“my.less”中的#MyDiv：

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

“bootstrap.css”应重命名（或链接）为“bootstrap.less”。运行：

lessc my.less my.css

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

Answer 2

CSS适用于整个文档。

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

e.g。 #id_of_div .the .rest .of .the .selector {}

您必须将此应用于每个选择器，并考虑groups（因此，它不仅仅是为整个样式表添加前缀并为每个}添加后缀<）

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

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

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 。加载CSS文件时出现错误，将调用 callbackError 。

祝你好运！

Answer 4

您可以使用iframe加载预览页面或将CSS动态加载到页面中。但是，如果您希望仅将样式应用于div，则必须在CSS选择器前加上div的id。 #div-id #element-inside-div { }。

加载它的脚本可能如下所示：

var cssFile = document.createElement( "link" );
cssFile.rel = "stylesheet";
cssFile.type = "text/css";
cssFIle.href = "file.css";
document.getElementsByTagName( "head" )[0].appendChild( cssFile );

为特定DIV加载外部CSS

4 个答案: