第n个孩子不工作答案

【问题标题】：nth-child not working第n个孩子不工作
【发布时间】：2012-11-30 01:35:20
【问题描述】：

我有一个列表，需要它上面的所有其他项目来更改颜色并删除它的边距。我使用了第 n 个孩子，它在除 IE7-8 之外的所有设备上都能完美运行。我知道他们不支持 nth-child，所以我使用了 Jquery。

我发现了这个：:nth-child is not working in IE 还有这个：http://verboselogging.com/2010/01/17/making-nth-child-work-everywhere

我尝试实现它们，但仍然无法正常工作。你可以在这里查看： http://www.dffernandez.com/client_review_files/tests/nth-child.html

#prop-images-wrapper {
float: left;
margin-bottom: 0.6em;
background-color: #F00;
width: 340px;
margin-right: 5px;}

#prop-images-wrapper li:nth-child(2n+1), .difcolor {
margin-right: 0px;
background-color: #06F;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>$(document).ready(function(){
$("#prop-images-wrapper li:nth-child(2n+1)").addClass("difcolor");
});</script>

提前谢谢你。

【问题讨论】：

这个 jquery 表达式对你有用吗？
注意：您可以使用:nth-child(odd) 和:nth-child(even) 使您的代码更具可读性。

标签： jquery css

【解决方案1】：

如果您使用 jquery 来设置第 n 个孩子，只需对所有内容使用 jquery，而不是为 jquery 使用 css 块和代码。

查看以下 jsfiddle

http://jsfiddle.net/RjGpC/1/

在下面这一行

#prop-images-wrapper li:nth-child(2n+1), .difcolor {

只需删除li:nth-child(2n+1),

【讨论】：

【解决方案2】：

您忘记在测试页面中加载 jquery。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

http://jsfiddle.net/m6vnt/1/

【讨论】：