jQuery中的css列表选择器，继承bug

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> <li>是由AJAX生成的，所以当我设置css时，它还没有生成。 我在AJAX中移动了css设置并且它有效。

而且我理解Leo的意思是“内联风格”。

Answer 1

更新li CSS规则：

ul#cards > li {  }

这将确保样式仅应用于ul#cards 直接子元素。

Answer 2

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

您是否尝试记录选择器的结果以确保实际捕获某些dom元素？