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

【问题标题】：css list selector in jQuery, inherit bugjQuery中的css列表选择器，继承错误
【发布时间】：2011-11-15 19:55:07
【问题描述】：

我有这样的页面：

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

基本上，有一张卡片列表，每张卡片都有一个cmets列表。 id为“panelX”的div的内容是JQuery在点击按钮时生成的（点击按钮之前不显示所有cmets和form）。

我在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() 仍然不起作用。

++++++

更新：

我想通了。因为<ol>内的<li>是AJAX生成的，而我设置css的时候还没有生成。我在 AJAX 中移动了 css 设置，它可以工作。

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

【问题讨论】：

标签： javascript jquery html css inheritance

【解决方案1】：

更新 li 的 CSS 规则：

ul#cards > li {  }

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

我添加了alert($('ol#commentlist' + id + ' li').css())，它说未定义。