javascript - jQuery 中的 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 在单击按钮时生成(在单击按钮之前不会显示所有评论和表单)。

我定义了 #cards 的 CSS和 #cards li在 css 文件中，和 ol.commentlist在 jQuery 中。

$('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 设置，它起作用了。

而且我理解 Leo 的意思是“内联样式”。

Answer 1

更新 li 的 CSS 规则:

ul#cards > li {  }

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