Ember.js的CSS繼承問題

我在將Inspiritas作爲Ember應用程序出現問題。該index.html的樣子如下：Ember.js的CSS繼承問題

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>title</title> 
     <meta name="author" content="me"> 
     <!--[if lt IE 9]> 
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
     <link rel="shortcut icon" href="favicon.ico"> 
     <link href="inspiritas.css" rel="stylesheet"> 
    </head> 

    <body> 
     <script type="text/x-handlebars"> 
      <div class="navbar navbar-static-top navbar-inverse"> 
       <div class="navbar-inner"> 
        <div class="container"> 
         ... 
        </div> 
       </div> 
      </div> 
      <div class="container"> 
       <div class="row-fluid"> 
        <div class="span3"> 
         ... 
        </div> 
        {{outlet}} 
       </div> 
      </div><!-- /container --> 
     </script> 

     <script type="text/x-handlebars" id="dashboard"> 
      <div class="span9" id="content-wrapper"> 
       <div id="content"> 
        <section id="tables"> 
         ... 
        </section> 
       </div> 
      </div> 
     </script>

首先，它不會加載<div class="container">的CSS（而不是一個導航欄裏面）。相反，它從body.ember-application繼承，並且在這個過程中失去了所有的CSS。不過，這隻發生在這個容器上。 LESS，我可以縮小它的唯一的一點是一些定製的造型在這裏：

body > .container { 
    // Color the whole container like the sidebar to fix faux columns 
    background: url('images/sidebar_bg.png') repeat @sidebarBackground; 

    .border-radius(@borderRadiusLarge); 

    // Make some space, eh. 
    margin-top: 40px; 
    margin-bottom: 40px; 
}

UPDATE：嗯，我有不知道爲什麼，但一個類名稱變更後的都走了狗屎，一切都已經失去了造型。

來源

2013-04-10 Hassan Khan

您粘貼的CSS規則使用後代選擇器，這意味着只有具有container類的元素將直接在body元素下面進行樣式化。但是，當Ember插入Handlebars模板時，它會通過一個View來包裝它們，從而創建另一箇中間人DIV。我想這是你的風格沒有出現的責任。

來源

2013-04-10 00:28:07

大聲笑，是啊我想了很多，我怎麼能表達同樣的事情在CSS中沒有使用後裔選擇器？ – 2013-04-10 14:25:47

就個人而言，我會添加一個不同的識別類，而不僅僅是「容器」，因爲這有點過於通用。如果您決定避免更改HTML，那麼您可以使用類似於'body> .ember-view> .container'的東西（但是顯然要注意，同一級別的任何其他容器，即使在不同的視圖中也會符合該規則）。 – 2013-04-10 23:37:13

不錯，是謝謝理解，如果我要使用另一個識別類，我仍然希望它使用所有容器的屬性，這是可能與LESS或CSS？我不會介意改變HTML的說實話，我只是不想失去Bootstrap已經適用於它的格式。 – 2013-04-11 09:25:32

Ember.js的CSS繼承問題

回答

相關問題