我有这样的页面:
<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 的意思是“内联样式”。
最佳答案
更新 li
的 CSS 规则:
ul#cards > li { }
这将确保样式仅应用于 ul#cards
的直接子元素。
关于javascript - jQuery 中的 css 列表选择器,继承错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8142330/