在 第7天:CSS中的选择器详解 这篇文章中我们介绍了各种选择器,但是并没有对每个选择器详细地讲解,今天通过一个真实的例子来讲解伪选择器,伪选择器分为伪类选择器(Pseudo-classes)和伪元素选择器(Pseudo-elements)。这两个概念老混淆,你有没有好的记忆方式,欢迎留言。我认为伪选择器在于「伪」这个字,它很能「伪装」,比如它偶尔伪装成一个DOM中不存在的元素。
1.伪类选择器(Pseudo-classes)它的作用是选中某个元素中符合某些条件的元素。比如鼠标悬停到某个元素后的状态,某个元素的第一个孩子,使用1个冒号 : 。它的效果好像是为元素添加了一个新的选择器。「作用于现有元素,相当于给现有元素添加某些属性」。对于这类选择器在前面的课程中我们有提到过 群里讨论的一个选择器问题(一定要看),它主要涉及到选择某些孩子节点。常用的伪类选择器有:
:first-child
:not
:nth-child()
:only-child()
:root()
:disabled