3.3 结构伪类选择器(2)

一、结构伪类选择器

这一节,我们来给大家讲解一下第3类结构伪类选择器。

结构伪类选择器(第2类)
选择器 说明
:first-of-type 选择同元素类型的第1个同级兄弟元素
:last-of-type 选择同元素类型的最后1个同级兄弟元素
:nth-of-type(n) 匹配同元素类型的第n个同级兄弟元素,n的值为“数字 | odd | even”
:only-of-type 匹配父元素中特定类型的唯一子元素(该父元素可以有多个子元素)

以上解释,大家看着比较难懂,需要结合一下实例才能真正理解。

 
<div>
    <h1></h1>
    <p></p>
    <span></span>
    <span></span>
</div>

(1):first-child

h1:first-child:选择的是h1元素,因为h1元素是div的第1个子元素。

p:first-child:选择不到任何元素,因为p并不是div的第1个子元素,而是div的第2个子元素。

span:first-child:选择不到任何元素,因为span并不是div的第1个子元素,而是div的第3个子元素;

(2):first-of-type

h1: first-of-type:选择的是h1元素,因为h1元素是div中所有h1元素中的第1个h1元素,事实上也只有一个为h1的子元素;

p: first-of-type:选择的是p元素,因为p元素是div中所有p元素中的第1个p元素,事实上也只有一个为p的子元素;

span: first-of-type:选择的是id="first"的span元素,因为在div元素中有2个span元素,我们选择的是两个之中的第1个。

总结:

“:first-child”是选择父元素下的第1个子元素(不区分元素类型),而“:first-of-type”是选择父元素下某个元素类型的第1个子元素(区分元素类型)。

“:last-child”和“:last-of-type”、“nth-child(n)”和“:nth-of-type(n)”同样也可以这样去理解,在此不再累赘说明。

大家好好根据上面例子去理解与区分第1类结构伪类选择器与第2类结构伪类选择器。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

如果你想要获取更多学习资料,或者在学习过程中遇到疑问想要得到跟教程一样最优质的解答,请通过以下方式关注我们:

(1)官方微博:

(2)新手Q群:69660533(暗号:lvye)(建议初学前端的加)

(3)官方Q群:457631216(暗号:lvye)(建议有JS基础的加)

(4)绿叶论坛:进入论坛

(5)常见问题:绿叶学习网常见问题解答

回到顶部