认识伪类

什么是伪类

• Pseudo-classes: 翻译过来是伪类;
• 伪类是选择器的一种，它用于选择处于特定状态的元素;

比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色;

常见的伪类有

• .动态伪类;
• 目标伪类;
• 语言伪类;
• 元素状态伪类;
• 结构伪类;
• 否定伪类;

所有的伪类: https://developer.mozilla.org/zhCN/docs/Web/CSS/Pseudo-classes

动态伪类（dynamic pseudo-classes)

使用举例

• a:link 未访问的链接显示orange的颜色；
• a:visited 已访问的链接显示red的颜色；
• a:hover 鼠标挪动到链接上(重要)显示green的颜色；
• a:active 激活的链接（鼠标在链接上长按住未松开）显示blue的颜色；
  
  使用注意
• :hover 必须放在 :link 和 :visited后面才能完全生效；
• :active 必须放在 :hover 后面才能完全生效；
• 所以建议的编写顺序是 :link、:visited、:hover、:active；

除了a元素，:hover、:active也能用在其他元素上

:focus

:focus指当前拥有输入焦点的元素（能接收键盘输入）

• 文本输入框一聚焦后，背景就会变红色；
• 因为链接a元素可以被键盘的Tab键选中聚焦，所以 :focus 也适用于a元素；

动态伪类编写顺序建议为 :link、:visited、:focus、:hover、:active

直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了

• 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

目标伪类（target pseudo-classes）

:target

语言伪类（language pseudo-classes）

:lang( )

元素状态伪类（UI element states pseudo-classes）

:enabled、:disabled、:checked

结构伪类（structural pseudo-classes）

:nth-child( )

:nth-child(1)

• 是父元素中的第1个子元素;

:nth-child(2n)

• n代表任意正整数和0;
• 是父元素中的第偶数个子元素（第2、4、6、8…个）;
• 跟:nth-child(even)同义;

:nth-child(2n + 1)

• n代表任意正整数和0;
• 是父元素中的第奇数个子元素（第1、3、5、7…个）;
• 跟:nth-child(odd)同义;

nth-child(-n + 2)

• 代表前2个子元素;

:nth-last-child( )

:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数

• :nth-last-child(1)，代表倒数第一个子元素;
• :nth-last-child(-n + 2)，代表最后2个子元素;

:nth-of-type( )

:nth-of-type()用法跟:nth-child()类似

• 不同点是:nth-of-type()计数时只计算同种类型的元素;

:nth-last-of-type( )

:nth-last-of-type()用法跟:nth-of-type()类似

• 不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数;

其他常见的伪类

:first-child：等同于:nth-child(1)
:last-child：等同于:nth-last-child(1)
:first-of-type：等同于:nth-of-type(1)
:last-of-type：等同于:nth-last-of-type(1)
:only-child：是父元素中唯一的子元素
:only-of-type：是父元素中唯一的这种类型的子元素
:root：根元素，就是HTML元素
:empty：代表里面完全空白的元素

否定伪类（negation pseudo-classes）

:not()的格式是:not(x)

• x是一个简单选择器
• 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）

:not(x)表示除x以外的元素