javascript - CSS 只影响容器内的元素？

Question

我有一个 CSS 文件，简而言之，它包含这样的 block :

%container .grass {
    position:fixed;
    bottom:0px;
    height:3%;
    background-color:#4CAF50;
    width:105%;
    margin-left:-10px;
}

其中 %container 是所有具有类 .grass 的元素都应该受到影响的容器，%container 始终是一个 id，比如#container 或#appcontent

但我认为我在某个地方错了，因为它不起作用，而且它也可能非常简单，那么它在哪里呢？

我还有更多内容如:

%container .subcontainer:not(.ui-draggable-dragging) {
    cursor:grab;
}
%container .numbercontainer > .number, %container .signcontainer > .sign {
    display:block;
}

好的，这是预处理器，我绝对确定它会正确生成内容，因为我检查了它的输出和给出的结果，但由于某种原因它不起作用。

App.prototype.getMainCSS = function(url) {
    console.log("GET: " + url);
    if (App.dependenciesLoaded.indexOf(url) === -1) {
        $.get(url,(function(data){
            var cssfile = document.createElement("link")
            cssfile.rel = "stylesheet";
            cssfile.type = "text/css";
            cssfile.innerHTML = data.replace(/%container/g,"#" + this.element.id);
            App.dependenciesLoaded.push(url);
            document.getElementsByTagName("head")[0].appendChild(cssfile);
        }).bind(this));
    }
}

Answer 1

这就解决了。

App.prototype.getMainCSS = function(url) {
    console.log("GET: " + url);
    if (App.dependenciesLoaded.indexOf(url) === -1) {
        $.get(url,(function(data){
            var cssfile = document.createElement("style") //not link
            //cssfile.rel = "stylesheet"; useless line
            cssfile.type = "text/css";
            cssfile.innerHTML = data.replace(/%container/g,"#" + this.element.id);
            App.dependenciesLoaded.push(url);
            document.getElementsByTagName("head")[0].appendChild(cssfile);
        }).bind(this));
    }
}