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设置并且它可以工作。

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

Answer 1

更新li的规则：

ul#cards > li {  }

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

Answer 2

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

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

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

2 个答案: