彻底理解nth-child和nth-of-type的区别

原文:https://www.cnblogs.com/pssp/p/5991029.html

为什么要写篇呢,主要是因为之前觉得自己已经理解了nth-of-type但后来发现好像和自己之前理解的不太一样,于是打算写下来。

nth-child倒很好理解就是选择第几个,代码如下:


标题

这是锻若

这是锻若

这是span 这是span 这是span

这是锻若

效果如下:

彻底理解nth-child和nth-of-type的区别_第1张图片

可以看出nth-child是根据元素的个数来计算的,尽管我们在:nth-child前面加了p。这个没啥好说的,但nth-of-type要是不研究一下还真容易理解错,它说的是按照类型来选择,看下面这个例子。


标题

这是锻若

这是锻若

这是span 这是span 这是span

这是锻若

效果如下:

彻底理解nth-child和nth-of-type的区别_第2张图片

这个也不难理解就是按照类型来计算,碰到一个同类型就加1,那你肯定会说既然如此那有什么好说的,关键如果像下面这样呢,如下:

.item:nth-of-type{color:red}

这种情况又是怎么个案类型法?所以今天主要是探讨这个问题。


标题

这是锻若

这是锻若

这是span 这是span 这是span

这是锻若

这是锻若

这是锻若

效果如下:

彻底理解nth-child和nth-of-type的区别_第3张图片

可以看到这里是选中了两个的,不同类型会被当作多类,只要符合选择器规范都会选中,额,好像有点简单哈,主要是这个例子写的太好了。就这样。还是总结一下吧。

总结

  • nth-child
    按照个数来算。

  • nth-of-type
    按照类型来计算,如果是class那么碰到不同类型的,单独一类,符合条件的选中。

你可能感兴趣的:(CSS)