CSSリストセレクタ、私はこのようなページを持っているバグ

Question

を継承：

<ul id="cards"> 
    <li id="card1"> 
    <div>...</div> 
    <div id="panel1"> 
     <form>...</form> 
     <ol class="commentlist" id="commentlist1"> 
     <li>...</li> 
     ... 
     </ol> 
    </div> 
    </li> 
    ... 
</ul> 

基本的には、カードのリストがあり、各カードには、コメントのリストを持っています。 idが "panelX"のdivの内容は、ボタンをクリックするとJQueryによって生成されます（ボタンをクリックする前にすべてのコメントとフォームは表示されません）。

私は、CSSファイル内に#cardsと#cards liのCSSを定義し、jQueryではol.commentlistと定義しています。

$('ol.commentlist').css()が動作しているようですが、$('ol.commentlist li').css()ではなく、まだ#cards liから継承されています。

$('ol#commentlistX').css()でも動作しますが、$('ol#commentlistX li').css()ではありません。

+++++++

更新：

私はBenMのソリューションは、唯一$(#card li)から継承回避するが$('ol.commentlist li').css()はまだ動作しません発見しました。

++++++

更新：

私は考え出しました。 <li>内の<ol>はAJAXで生成されているので、CSSを設定するまでにはまだ生成されていません。私はAJAXでCSSの設定を移動し、それは動作します。

そして、私はレオが "インラインスタイル"を意味するものを理解しています。 liため

Answer 1

更新あなたのCSSルールは：

ul#cards > li { } 

これは、スタイルだけ直接の子ul#cardsの要素に適用されることを保証します。

Answer 2

jQueryの.css（）メソッドは要素にインラインスタイルを適用するため、#cards liがol.commentlist liよりも強力なセレクタであっても、他のスタイルを上書きする必要があります。

セレクタの結果をログに記録して、実際にいくつかのdom要素をキャッチしていることを確認しましたか？