伪类选择器

css伪类选择器大全：

developer.mozilla.org/zh-CN/docs/…

伪类	含义
:link	选中未访问过的超链接
:visited	选中已访问过的超链接
:hover	选中鼠标移入的元素
:active	选中鼠标按下的元素
:focus	选中聚焦的表单元素
:disabled	选中被禁用的表单元素
:checked	选中被选中的表单元素
:first-child	选中第一个子元素
:last-child	选中最后一个子元素
:nth-child(an+b)	选中第「an+b」个子元素 a和b是常量，n的值会从0开始依次递增
:first-of-type	选中第一个指定类型的子元素
:last-of-type	选中最后一个指定类型的子元素
:nth-of-type(an+b)	选中第「an+b」个指定类型的子元素 a和b是常量，n的值会从0开始依次递增

LVHA顺序

a 标签的伪类选择器需要按照一定的顺序来写，这是因为它们的优先级是有区别的。通常，我们会按照 :link、:visited、:hover、:active 的顺序来写，这样可以保证样式的正确应用。这个顺序也被称为 LVHA 顺序。

为什么使用LVHA

按照 LVHA 顺序来写 a 标签的伪类选择器是为了保证样式的正确应用。这是因为这些伪类选择器的优先级是有区别的。例如，如果你把 :hover 选择器放在 :link 选择器之前，那么当鼠标悬停在链接上时，:link 选择器定义的样式会覆盖 :hover 选择器定义的样式，导致悬停效果无法显示。因此，我们需要按照 LVHA 顺序来写这些伪类选择器。

LVHA例子

这是一个按照 LVHA 顺序写的 a 标签伪类选择器的例子：

a:link {
    color: blue;
}
a:visited {
    color: purple;
}
a:hover {
    color: red;
}
a:active {
    color: yellow;
}

:nth-child(an+b)

.item .box:nth-child(2n){
  background-color: red;
}
.item .box:nth-child(2n+1){
  background-color: green;
}

如图,2n只匹配了2的倍数 2,4,6,8,10 2n+1 匹配了奇数1,3,5,7,9

an+b 从0开始 b被认为起始点,a被认为是两数之间的递进关系

3n+1: 1 4 7 10 > 从1开始, 3 递增 
2n+4: 4 6 8 10 > 从2开始, 2 递增