粗谈伪类选择器

Posted 2020-11-29 freeland

伪类选择器是添加到选择器的关键字，用于指定要选择的元素的特殊状态。以：单冒号开始。分为动态伪类选择器、结构伪类选择器、否定伪类选择器。

动态伪类选择器：

：link{ }【元素未访问时的状态】

：visited{ }【元素已访问后的装态】

：focus{ }【被选中时会发生的装态】

：hover{ }【鼠标悬停在元素时的会发生的状态】

：active{ }【鼠标点击时元素发生的状态】

注：该顺序不能改变，link和visited为静态伪类选择器，可不分先后顺序

结构伪类选择器：用于选中某个元素

1、

：first-child  选中第一个元素

：last-child  最后一个元素

：nth-child(n)  选中第n个元素

示例：section>p:nth-child(3)表示：section下的第3个元素，如果是p则选中

2、选中同元素名相同标签的第几个元素

:nth-of-type(n)

示例：section>p:nth-of-type(3)  表示：选中section下的第3个p

3、选中倒数第n个元素

：nth-last-child(n)

否定伪类选择器

格式：   :not()  除了某个元素，其他添加样式

示例：section>p:not(:nth-child(3))  除了第3个p其他添加样式

格式：除了某几个元素，其他添加样式

：not(  )：not（）