CSSと動的コンテンツ

Question

UPDATE：動的なコンテンツとは何の関係として、私のCSSで台無し。！ その答えは、しかし非常に有益です！

私はタグを作成し、ハンドルを持つコンテンツを挿入しています：

ハンドルバーコード：

{{#each docs}} 
    <article class="first"> 
     <p class="date"> 
      {{@date}} {{date}} 
     </p> 
     <h4 class="header">{{@venue.title}} {{venue.title}} 
     - {{@venue.city}} {{venue.city}}</h4> 
     <p class="details"> 
      {{@description}} {{description}} 
     </p> 
    </article> 
{{/each}} 

を私はちょうど記事をリストする場合、CSSは動作します - しかし、私はハンドルを動的に作成してみましょうするとき、それは適用されません。

CSSコード：

div.gig-items{ 
    article: nth-of-type(n +2); 
    height: 0; 
    padding: 0; 
} 

が最初にコンテンツを作成し、CSSを適用する方法や、いくつかのよりエレガントな解決策はありますか？

Answer 1

CSSは、それぞれの再描画時に自動的に適用されます。だから、ソースhtmlや動的にjsであなたのコードを挿入することは重要ではない、CSSは正しく適用されます。いくつかのエラーを持っています。コードから確実に来る

問題...

まずCSS

• あなたがそこにはdivがなく、 クラスgig-itemsを持つすべてのdiv要素のスタイルをしたいのですが、テンプレート内のクラスgig-items ...
• articleの値をnth-of-type(n+2)と定義しますが、これはプロパティではなく、セレクタです

が好き、それを使用する必要があります。

article:nth-of-type(n+2) { 
    color: blue; 
} 

は、その後、あなたのハンドルバーテンプレートで：

• 私はあなたがその名前で値を挿入するとしていますが、ある 接頭@を使用します @indexまたは@keys
• のようにハンドルバーのループ値のために確保別のエラーは、あなたが書くということですubleハンドルバー 値を表示するブロック。 1つで十分です。

値を挿入するための正しい方法である：

<p class="date">{{date}}</p>