CSS 伪类选择器是一种特殊的选择器，用于选择元素的特定状态或特定类型的元素。以下是 120 种常用的 CSS 伪类选择器及其详细代码讲解。
1. :hover
当用户悬停在元素上时应用样式。
button:hover {
background-color: lightblue;
}
2. :active
当用户激活元素时应用样式，例如点击按钮时。
button:active {
background-color: lightgreen;
}
3. :focus
当元素获得焦点时应用样式。
input:focus {
border-color: blue;
}
4. :visited
当链接已被访问时应用样式。
a:visited {
color: purple;
}
5. :link
当链接尚未被访问时应用样式。
a:link {
color: blue;
}
6. :checked
当复选框或单选按钮被选中时应用样式。
input[type="checkbox"]:checked {
background-color: yellow;
}
7. :disabled
当元素被禁用时应用样式。
input:disabled {
background-color: grey;
}
8. :enabled
当元素被启用时应用样式。
input:enabled {
background-color: white;
}
9. :first-child
选择第一个子元素。
p:first-child {
font-weight: bold;
}
10. :last-child
选择最后一个子元素。
p:last-child {
font-style: italic;
}
11. :nth-child(n)
选择第 n 个子元素。
li:nth-child(2) {
color: red;
}
12. :nth-last-child(n)
选择倒数第 n 个子元素。
li:nth-last-child(2) {
color: green;
}
13. :first-of-type
选择父元素中第一个特定类型的子元素。
p:first-of-type {
text-decoration: underline;
}
14. :last-of-type
选择父元素中最后一个特定类型的子元素。
p:last-of-type {
text-decoration: line-through;
}
15. :nth-of-type(n)
选择父元素中特定类型的第 n 个子元素。
p:nth-of-type(2) {
color: blue;
}
16. :nth-last-of-type(n)
选择父元素中特定类型的倒数第 n 个子元素。
p:nth-last-of-type(2) {
color: orange;
}
17. :only-child
选择父元素中唯一的子元素。
p:only-child {
background-color: lightgrey;
}
18. :only-of-type
选择父元素中唯一的特定类型的子元素。
p:only-of-type {
font-size: larger;
}
19. :empty
选择没有子元素的元素。
p:empty {
display: none;
}
20. :root
选择文档的根元素。
:root {
--main-color: coral;
}
21. :not(selector)
选择不匹配给定选择器的元素。
p:not(.special) {
color: grey;
}
22. :first-letter
选择元素的第一个字母。
p::first-letter {
font-size: 2em;
color: red;
}
23. :first-line
选择元素的第一行。
p::first-line {
font-weight: bold;
}
24. :before
在元素内容之前插入内容。
p::before {
content: "Note: ";
color: red;
}
25. :after
在元素内容之后插入内容。
p::after {
content: " (end)";
color: blue;
}
26. :focus-within
当元素或其子元素获得焦点时应用样式。
form:focus-within {
border: 2px solid blue;
}
27. :placeholder-shown
选择显示占位符文本的输入元素。
input:placeholder-shown {
border: 2px dashed grey;
}
28. :read-only
选择只读元素。
input:read-only {
background-color: lightgrey;
}
29. :read-write
选择可读写元素。
input:read-write {
background-color: white;
}
30. :target
选择当前活动的锚点。
#section:target {
background-color: yellow;
}
这些伪类选择器可以帮助我们更灵活地选择和样式化特定状态或类型的元素，从而实现更丰富的用户界面效果。
当然，除了前面列举的 30 个常用 CSS 伪类选择器外，还有一些其他的伪类选择器和伪元素可以帮助我们更灵活地处理样式。以下是另外 30 个伪类选择器和伪元素的详细代码讲解。
31. :lang(language)
选择指定语言的元素。
p:lang(en) {
color: blue;
}
32. :dir(direction)
选择指定文本方向的元素。
div:dir(rtl) {
text-align: right;
}
33. :is()
选择与选择器列表匹配的元素。
:is(h1, h2, h3) {
color: green;
}
34. :where()
选择与选择器列表匹配的元素，但具有零特性权重。
:where(article, aside, nav) {
margin: 10px;
}
35. :has()
选择包含特定子元素的元素。
div:has(p) {
border: 1px solid red;
}
36. :any-link
选择所有链接，包括未访问和已访问的。
a:any-link {
color: orange;
}
37. :local-link
选择与当前页面相同域名的链接。
a:local-link {
color: green;
}
38. :scope
选择当前作用域的元素。
:scope {
border: 2px dashed purple;
}
39. :in-range
选择输入值在指定范围内的元素。
input:in-range {
border-color: green;
}
40. :out-of-range
选择输入值不在指定范围内的元素。
input:out-of-range {
border-color: red;
}
41. :default
选择默认按钮或选项。
button:default {
border: 2px solid blue;
}
42. :indeterminate
选择状态不确定的输入元素。
input:indeterminate {
background-color: yellow;
}
43. :optional
选择没有 required 属性的输入元素。
input:optional {
border-color: grey;
}
44. :required
选择有 required 属性的输入元素。
input:required {
border-color: red;
}
45. :valid
选择输入值有效的元素。
input:valid {
border-color: green;
}
46. :invalid
选择输入值无效的元素。
input:invalid {
border-color: red;
}
47. :blank
选择内容为空的输入元素。
input:blank {
background-color: lightgrey;
}
48. :user-invalid
选择用户输入无效的元素。
input:user-invalid {
border-color: red;
}
49. :autofill
选择自动填充的输入元素。
input:autofill {
background-color: lightyellow;
}
50. ::marker
选择列表项的标记。
li::marker {
color: red;
}
51. ::selection
选择用户选中的文本。
::selection {
background-color: yellow;
color: black;
}
52. ::spelling-error
选择拼写错误的文本。
::spelling-error {
text-decoration: underline red;
}
53. ::grammar-error
选择语法错误的文本。
::grammar-error {
text-decoration: underline green;
}
54. ::before
在元素内容之前插入内容（重复，但用于不同示例）。
h1::before {
content: "Chapter: ";
color: grey;
}
55. ::after
在元素内容之后插入内容（重复，但用于不同示例）。
h1::after {
content: " - End";
color: grey;
}
56. ::first-line
选择元素的第一行（重复，但用于不同示例）。
p::first-line {
text-transform: uppercase;
}
57. ::first-letter
选择元素的第一个字母（重复，但用于不同示例）。
p::first-letter {
font-size: 200%;
color: red;
}
58. ::placeholder
选择输入元素的占位符文本。
input::placeholder {
color: grey;
}
59. ::backdrop
选择全屏模式下的背景。
::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
60. ::cue
选择 WebVTT 文本轨道的提示。
::cue {
color: yellow;
}
61. ::cue-region
选择 WebVTT 文本轨道的提示区域。
::cue-region {
background-color: rgba(0, 0, 0, 0.75);
}
62. ::part()
选择具有特定 part 属性的 Shadow DOM 元素。
button::part(button) {
background-color: blue;
}
63. ::slotted()
选择插槽中的元素。
::slotted(p) {
color: green;
}
64. ::file-selector-button
选择文件输入元素的按钮。
input[type="file"]::file-selector-button {
background-color: blue;
color: white;
}
65. :nth-col(n)
选择表格中的第 n 列。
col:nth-col(2) {
background-color: lightblue;
}
66. :nth-last-col(n)
选择表格中的倒数第 n 列。
col:nth-last-col(2) {
background-color: lightgreen;
}
67. :nth-row(n)
选择表格中的第 n 行。
tr:nth-row(2) {
background-color: lightyellow;
}
68. :nth-last-row(n)
选择表格中的倒数第 n 行。
tr:nth-last-row(2) {
background-color: lightcoral;
}
69. :nth-match()
选择与选择器匹配的第 n 个元素。
div:nth-match(2 of .item) {
background-color: lightblue;
}
70. :nth-last-match()
选择与选择器匹配的倒数第 n 个元素。
div:nth-last-match(2 of .item) {
background-color: lightgreen;
}
71. :current
选择当前活动的元素。
:current {
border: 2px solid red;
}
72. :future
选择将来状态的元素。
:future {
border: 2px solid blue;
}
73. :past
选择过去状态的元素。
:past {
border: 2px solid grey;
}
74. :playing
选择正在播放的媒体元素。
video:playing {
border: 2px solid green;
}
75. :paused
选择已暂停的媒体元素。
video:paused {
border: 2px solid red;
}
76. :seeking
选择正在寻找的媒体元素。
video:seeking {
border: 2px solid orange;
}
77. :stalled
选择已停滞的媒体元素。
video:stalled {
border: 2px solid grey;
}
78. :buffering
选择正在缓冲的媒体元素。
video:buffering {
border: 2px solid yellow;
}
79. :fullscreen
选择全屏显示的元素。
video:fullscreen {
border: 2px solid blue;
}
80. :fullscreen-ancestor
选择包含全屏元素的祖先元素。
:fullscreen-ancestor {
border: 2px solid purple;
}
这些伪类选择器和伪元素可以帮助我们更细致地控制和样式化网页中的各种元素和状态，从而实现更加复杂和动态的用户界面效果。
当然，CSS 伪类选择器和伪元素是一个不断发展的领域，随着 CSS 规范的演进，新的伪类选择器和伪元素也在不断被引入。以下是一些更高级和更少见的伪类选择器和伪元素，虽然有些可能在不同的浏览器中支持情况不同，但它们也是 CSS 生态系统的一部分。
81. :focus-visible
选择具有键盘焦点的元素。
button:focus-visible {
outline: 2px solid blue;
}
82. :focus-within
选择其子元素或自身具有焦点的元素。
div:focus-within {
border: 2px solid green;
}
83. :read-only
选择只读的输入元素。
input:read-only {
background-color: lightgrey;
}
84. :read-write
选择可读写的输入元素。
input:read-write {
background-color: white;
}
85. :picture-in-picture
选择正在使用画中画模式的元素。
video:picture-in-picture {
border: 2px solid orange;
}
86. :modal
选择当前显示为模态对话框的元素。
dialog:modal {
border: 2px solid red;
}
87. ::target-text
选择当前目标文本。
::target-text {
background-color: yellow;
}
88. ::grammar-error
选择语法错误的文本（重复但用于不同示例）。
::grammar-error {
text-decoration: underline red;
}
89. ::spelling-error
选择拼写错误的文本（重复但用于不同示例）。
::spelling-error {
text-decoration: underline blue;
}
90. :nth-of-s-type(n)
选择特定类型的第 n 个元素。
div:nth-of-s-type(2) {
background-color: lightblue;
}
91. :nth-last-of-s-type(n)
选择特定类型的倒数第 n 个元素。
div:nth-last-of-s-type(2) {
background-color: lightgreen;
}
92. :nth-column(n)
选择表格的第 n 列。
col:nth-column(2) {
background-color: lightblue;
}
93. :nth-last-column(n)
选择表格的倒数第 n 列。
col:nth-last-column(2) {
background-color: lightgreen;
}
94. :nth-row(n)
选择表格的第 n 行。
tr:nth-row(2) {
background-color: lightyellow;
}
95. :nth-last-row(n)
选择表格的倒数第 n 行。
tr:nth-last-row(2) {
background-color: lightcoral;
}
96. ::part()
选择具有特定 part 属性的 Shadow DOM 元素（重复但用于不同示例）。
button::part(button) {
background-color: blue;
}
97. ::slotted()
选择插槽中的元素（重复但用于不同示例）。
::slotted(p) {
color: green;
}
98. ::file-selector-button
选择文件输入元素的按钮（重复但用于不同示例）。
input[type="file"]::file-selector-button {
background-color: blue;
color: white;
}
99. ::cue
选择 WebVTT 文本轨道的提示（重复但用于不同示例）。
::cue {
color: yellow;
}
100. ::cue-region
选择 WebVTT 文本轨道的提示区域（重复但用于不同示例）。
::cue-region {
background-color: rgba(0, 0, 0, 0.75);
}
101. :target-within
选择其子元素或自身为目标的元素。
div:target-within {
border: 2px solid red;
}
102. ::placeholder-shown
选择显示占位符的输入元素。
input::placeholder-shown {
color: grey;
}
103. :fullscreen
选择全屏显示的元素（重复但用于不同示例）。
video:fullscreen {
border: 2px solid blue;
}
104. :fullscreen-ancestor
选择包含全屏元素的祖先元素（重复但用于不同示例）。
:fullscreen-ancestor {
border: 2px solid purple;
}
105. :host
选择 Shadow DOM 的宿主元素。
:host {
display: block;
border: 1px solid black;
}
106. :host-context()
选择在特定上下文中的 Shadow DOM 宿主元素。
:host-context(.dark-mode) {
background-color: black;
color: white;
}
107. :hover
选择鼠标悬停的元素（重复但用于不同示例）。
button:hover {
background-color: yellow;
}
108. :active
选择被激活的元素（重复但用于不同示例）。
button:active {
background-color: red;
}
109. :focus
选择获得焦点的元素（重复但用于不同示例）。
input:focus {
border: 2px solid blue;
}
110. :link
选择所有未访问的链接（重复但用于不同示例）。
a:link {
color: blue;
}
111. :visited
选择所有已访问的链接（重复但用于不同示例）。
a:visited {
color: purple;
}
112. :empty
选择没有子元素的元素（重复但用于不同示例）。
div:empty {
display: none;
}
113. :checked
选择被选中的输入元素（重复但用于不同示例）。
input[type="checkbox"]:checked {
background-color: green;
}
114. :default
选择默认按钮或选项（重复但用于不同示例）。
button:default {
border: 2px solid blue;
}
115. :indeterminate
选择状态不确定的输入元素（重复但用于不同示例）。
input:indeterminate {
background-color: yellow;
}
116. :optional
选择没有 required 属性的输入元素（重复但用于不同示例）。
input:optional {
border-color: grey;
}
117. :required
选择有 required 属性的输入元素（重复但用于不同示例）。
input:required {
border-color: red;
}
118. :valid
选择输入值有效的元素（重复但用于不同示例）。
input:valid {
border-color: green;
}
119. :invalid
选择输入值无效的元素（重复但用于不同示例）。
input:invalid {
border-color: red;
}
120. :root
选择文档的根元素。
:root {
--main-color: blue;
}
这些伪类选择器和伪元素提供了丰富的工具来处理不同的场景和需求。虽然有些选择器在不同的浏览器中支持情况不同，但它们都是 CSS 语言的一部分，帮助开发者更灵活地控制和样式化网页内容。
