CSS伪类选择器详细讲解

伪类选择器是CSS中一类特殊的选择器，用于选择某些元素的特定状态。以下是一些常用的CSS伪类选择器及其用法：

1. :link - 选择未访问的链接

a:link {
  color: blue;
}

2. :visited - 选择已访问的链接

a:visited {
  color: purple;
}

3. :hover - 鼠标悬停时的状态

a:hover {
  color: red;
}

4. :active - 鼠标点击时的状态

a:active {
  color: yellow;
}

5. :focus - 元素获得焦点时的状态

input:focus {
  border-color: red;
}

6. :first-child - 选择父元素的第一个子元素

p:first-child {
  color: red;
}

7. :last-child - 选择父元素的最后一个子元素

p:last-child {
  color: blue;
}

8. :nth-child(n) - 选择父元素的第n个子元素

p:nth-child(2) {
  color: green;
}

9. :nth-of-type(n) - 选择指定类型的第n个同级兄弟元素

p:nth-of-type(2) {
  color: orange;
}

10. :empty - 选择没有子元素的元素

p:empty {
  display: none;
}

11. :checked - 选择被选中的表单元素（如复选框或单选按钮）

input:checked {
  background-color: green;
}

12. :disabled - 选择被禁用的表单元素

input:disabled {
  background-color: grey;
}

13. :enabled - 选择被启用的表单元素

input:enabled {
  background-color: white;
}

14. :not - 选择不符合条件的元素

p:not(.classname) {
  color: purple;
}

15. :first-of-type - 选择父元素下同类型的第一个兄弟元素

p:first-of-type {
  color: red;
}

16. :only-child - 选择是父元素的唯一子元素的元素

p:only-child {
  color: blue;
}

17. :only-of-type - 选择是父元素唯一的同类型兄弟元素的元素

p:only-of-type {
  color: green;
}

18. :in-range - 选择有值且在指定范围内的输入元素

input:in-range {
  border-color: green;
}

19. :out-of-range - 选择有值但不在指定范围内的输入元素

input:out-of-range {
  border-color: red;
}

20. :valid - 选择输入的内容是合法的元素

input:valid {
  border-color: green;
}

21. :invalid - 选择输入的内容是不合法的元素

input:invalid {
  border-color: red;
}

22. :target - 选择当前的锚点元素

h1:target {
  color: red;
}

2