CSS仅影响容器内的元素？

问题描述：

我有一个CSS文件，在短期包含这样的块：CSS仅影响容器内的元素？

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

凡％容器是其中具有类.grass所有元素都不会受到影响的容器，容器％总是一个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)); 
    } 
}

我假设你真的没有在你的CSS权利％容器的东西，它仅仅是为了举例的目的？另外，你可以创建一个小提琴展示你的意思吗？ – sma 2015-02-23 19:08:40

％...你的意思是'＃'代表id或'。'对于类..'＃容器'或'.container' – Daniel 2015-02-23 19:10:00

假设您使用＃而不是％，那么css是正确的。您还必须显示相关的html – MightyPork 2015-02-23 19:10:39

答

这解决了这个问题。

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)); 
    } 
}

CSS仅影响容器内的元素？

相关推荐