关于css3选择器nth-of-type/nth-child遇到的一些坑

也是在做项目的时候发现的,平时用的时候没什么问题,本来可以用表格写的,结果用起ul了,导致使用上述css3选择器设置边框的时候出现了一些问题

之前的理解一直是这样的,可能某些人会跟我一样。
nth-of-type:选取同类型的,例如nth-of-type(odd)就是选取同类型的奇数标签
nth-child:选区同一元素下所有兄弟节点的,例如nth-child(odd),会计算其他标签在内的。

但是在渲染的时候就发现出现了问题,我们先来看下图片
关于css3选择器nth-of-type/nth-child遇到的一些坑_第1张图片

上图,中途的div是为了测试用的,查看插入其他节点是否有问题。
我们明明设置了col-2类的奇数行,但是却从偶数行开始算起了,我在col-3前面又添加的一个li,发现正常了。
由此推断

看来是解析了col-2的类型,然后按照li的顺序来算odd的,如果li没有col-2就不执行css,大概应该是这么一个流程吧,说抽象一点就是(根据tagName排序的吧。跟前面的类选择器没关系)

关于css3选择器nth-of-type/nth-child遇到的一些坑_第2张图片

看了上个例子之后会发现下面这个例子也很好理解了。都是按照标签名来算的,class只是来决定是否渲染,标签才是查找元素

如果有错误请指出,谢谢~

你可能感兴趣的:(css)