Javascript jQuery中的css列表选择器，继承错误

我有这样一页：

<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（）

无效，因为它仍然继承自

#卡片li

另外，

$（'ol#commentlistX'）.css（）可以工作，但是
$（'ol#commentlistX li'）.css（）不能工作

+++++++

更新：

我发现BenM的解决方案只避免继承
$（#card li）
，但是
$（'ol.commentlist li'）.css（）
仍然不起作用

++++++

更新：

我明白了。因为
中的
是由AJAX生成的，在我设置css时，它还没有生成。我在AJAX中移动了css设置，它可以正常工作

我理解Leo的意思是“内联样式”。
为
li
更新CSS规则：

ul#cards > li {  }

这将确保样式仅应用于
ul#cards
jQuery的.css（）方法的直接子元素将内联样式应用于元素，因此即使
#cards li
是比
ol.commentlist li
更强的选择器，它也应该覆盖其他样式

您是否尝试记录选择器的结果以确保确实捕获了一些dom元素？
我添加了
警报（$（'ol#commentlist'+id+'li'）.css（））
，它说未定义。