发新贴  快速回复

关于nth-child、nth-of-type,选择奇数的问题

  mikasa
2018-08-05 21:04

比如说我想让 col2这个class的奇数有边框,偶数没有。 使用nth-child、nth-of-type,参数填写odd。 

会遇到这种问题,如果col2中穿插一个col1的元素,会导致下一行的col2变成从偶数开始,就是说吧col1当成奇数了。

这种情况该怎么解决,或者有什么其他的写法?

 
2017年2月8日

用col2:nth-of-type(odd){border:1px solid #000;}这样还有错吗?

具体你没有代码,不好知道你问题在哪里,上面那个先试试。

2018-08-06 08:29  回复本帖
 
mikasa

只有两格的才是col2,上面的图发现是按照该分类下总元素的奇数来显示,包括正码a也算进去了。

 

nth-child也是这样

2018-08-06 09:08  回复本帖
 
mikasa

2017年2月8日 2018-08-06 08:29发表的内容:

用col2:nth-of-type(odd){border:1px solid #000;}这样还有错吗?

具体你没有代码,不好知道你问题在哪里,上面那个先试试。

图我已经贴在下面了,麻烦帮忙看下谢谢。如果是这种写法的话那我就不用提问了,只是他这个机制不太清楚。
2018-08-06 09:09  回复本帖
 
2017年2月8日

mikasa 2018-08-06 09:09发表的内容:

图我已经贴在下面了,麻烦帮忙看下谢谢。如果是这种写法的话那我就不用提问了,只是他这个机制不太清楚。
a有没有也用了col2的class,不然你整理下,直接发代码,你自己写个小例子,然后写上你错的方式,我来改改。
2018-08-06 13:07  回复本帖
 
mikasa

2018-08-07 09:34  回复本帖
 
mikasa

2017年2月8日 2018-08-06 13:07发表的内容:

a有没有也用了col2的class,不然你整理下,直接发代码,你自己写个小例子,然后写上你错的方式,我来改改。
好像不是穿插的问题,col2之前带了一个col3就变了,具体你看下下面的图,附件我传不了。谢谢
2018-08-07 09:35  回复本帖
 
2017年2月8日

mikasa 2018-08-07 09:35发表的内容:

好像不是穿插的问题,col2之前带了一个col3就变了,具体你看下下面的图,附件我传不了。谢谢
上面的图我看了,是正确的。
2018-08-07 09:38  回复本帖
 
mikasa

2017年2月8日 2018-08-07 09:38发表的内容:

上面的图我看了,是正确的。
中间的div是测试用的穿插其他会不会有影响,现在得出来一个结论



看来是解析了col-2的类型,然后按照li的顺序来算odd的,如果li没有col-2就不执行css,大概应该是这么一个流程吧

以上的方法有没有其他办法解决
2018-08-07 09:49  回复本帖
 
2017年2月8日

mikasa 2018-08-07 09:49发表的内容:

中间的div是测试用的穿插其他会不会有影响,现在得出来一个结论



看来是解析了col-2的类型,然后按照li的顺序来算odd的,如果li没有col-2就不执行css,大概应该是这么一个流程吧

以上的方法有没有其他办法解决

其实我一直不知道你要什么效果,本来你后面发的那张图是对的,nth-of-type就是从选中的元素中选择奇数个加样式,而nth-child就不是这样的,跟它的父级和顺序都有关系,具体你要哪种效果,然后把你要的效果且你做错的代码贴出来,我来弄成正确的效果,但是你一直是截图,没有代码,看看你发的文字,你认为别人能知道是什么意思吗?要的是代码,文字说再多都无法表达清楚。关于你后面问还有没有其它解决办法,我只能说,不清楚你的要求。

2018-08-07 10:23  回复本帖
 
mikasa

2017年2月8日 2018-08-07 10:23发表的内容:

其实我一直不知道你要什么效果,本来你后面发的那张图是对的,nth-of-type就是从选中的元素中选择奇数个加样式,而nth-child就不是这样的,跟它的父级和顺序都有关系,具体你要哪种效果,然后把你要的效果且你做错的代码贴出来,我来弄成正确的效果,但是你一直是截图,没有代码,看看你发的文字,你认为别人能知道是什么意思吗?要的是代码,文字说再多都无法表达清楚。关于你后面问还有没有其它解决办法,我只能说,不清楚你的要求。

谢谢,nth的排序原理已经清楚了,我本想找一个简单的方法来解决这个问题,虽然麻烦也可以解决。如果没有方案的话用稍微麻烦的也行。
可能是开始没有深入了解过,第一映像错误导致这样的问题。
2018-08-07 10:49  回复本帖
登录 后才可以发表回复