详细讲解伪类选择器nth-of-type

:nth-of-type属于css3的新增选择器,用起来很方便,所以我们有必要在这里详细说一下。

1.nth-child和nth-of-type的区别

我是第一个h1

我是第一个p

我是第二个p

我是第二个h1

我是第三个p

我是第四个p

我们以这个例子进行说明

当css代码写成这样时

p:nth-child(2){
            color: red;
        }

结果是
详细讲解伪类选择器nth-of-type_第1张图片
如果当css代码换成这样结果又会是什么样的呢?

h1:nth-child(2){
            color: red;
        }

结果是并不会有元素变红

这是因为:nth-child(2)会首先找父元素的第二个子元素,然后再进行匹配,看第二个子元素是否为指定的元素,如果是,才会进行渲染。

接下来再看一下nth-of-type的用法

h1:nth-of-type(2){
            color: red;
        }

这时结果为:
详细讲解伪类选择器nth-of-type_第2张图片
如果代码为

p:nth-of-type(2){
            color: red;
        }

则结果为
详细讲解伪类选择器nth-of-type_第3张图片
由此可见,nth-of-type(n)的用法并不会受到其他类型的影响,它会去找指定类型的同类元素中指定序号的元素。

2. 参数研究

实际上,不管是nth-child还是nth-of-type中能够传的参数都不只是一个数字而已。
(1)传数字(注意是从1开始哦!!!
这种用法比较简单,不再赘述
(2)传关键字
可以传的关键字包括odd(奇数),even(偶数)。
(3)传表达式(an+1),这时候就是一个循环(这时候n从0开始循环,到3停止)
例如,想让偶数个元素变为红色
可以写成

p:nth-of-type(2n)

奇数个元素变为红色,可以写成

p:nth-of-type(2n+1)

你可能感兴趣的:(css,css选择器)