:first-child | 选择父元素的第一个子元素 | p:first-child { color: red; } | 选择所有父元素的第一个 <p> 元素。 |
:last-child | 选择父元素的最后一个子元素 | p:last-child { color: blue; } | 选择所有父元素的最后一个 <p> 元素。 |
:nth-child(n) | 选择父元素的第 n 个子元素 | p:nth-child(2) { color: green; } | 选择所有父元素的第 2 个 <p> 元素。 |
:nth-last-child(n) | 选择父元素的倒数第 n 个子元素 | p:nth-last-child(2) { color: purple; } | 选择所有父元素的倒数第 2 个 <p> 元素。 |
:first-of-type | 选择父元素中特定类型的第一个子元素 | p:first-of-type { color: red; } | 选择父元素中第一个 <p> 元素。 |
:last-of-type | 选择父元素中特定类型的最后一个子元素 | p:last-of-type { color: blue; } | 选择父元素中最后一个 <p> 元素。 |
:nth-of-type(n) | 选择父元素中特定类型的第 n 个子元素 | p:nth-of-type(2) { color: green; } | 选择父元素中第 2 个 <p> 元素。 |
:nth-last-of-type(n) | 选择父元素中特定类型的倒数第 n 个子元素 | p:nth-last-of-type(2) { color: purple; } | 选择父元素中倒数第 2 个 <p> 元素。 |
:only-child | 选择父元素中唯一的子元素 | p:only-child { color: red; } | 选择父元素中唯一的 <p> 元素。 |
:only-of-type | 选择父元素中唯一特定类型的子元素 | p:only-of-type { color: blue; } | 选择父元素中唯一的 <p> 元素。 |
:empty | 选择没有子元素的元素 | p:empty { display: none; } | 选择没有子元素的 <p> 元素。 |
:root | 选择文档的根元素 | :root { --main-color: #06c; } | 选择文档的根元素（通常为 <html>）。 |
:not(selector) | 选择所有不匹配指定选择器的元素 | :not(p) { color: gray; } | 选择所有不是 <p> 的元素。 |
:lang(language) | 选择具有指定语言属性的元素 | p:lang(en) { color: blue; } | 选择语言属性为 en 的 <p> 元素。 |
:target | 选择当前活动的锚链接目标元素 | #section:target { border: 2px solid blue; } | 选择当前活动的 ID 为 section 的元素。 |
:hover | 选择鼠标悬停在其上的元素 | a:hover { color: red; } | 选择鼠标悬停的 <a> 元素。 |
:focus | 选择获得焦点的元素 | input:focus { border: 2px solid blue; } | 选择获得焦点的 <input> 元素。 |
:active | 选择用户激活的元素 | a:active { color: green; } | 选择用户激活的 <a> 元素。 |
:visited | 选择已访问的链接 | a:visited { color: purple; } | 选择已访问的 <a> 元素。 |
:link | 选择未访问的链接 | a:link { color: blue; } | 选择未访问的 <a> 元素。 |
:checked | 选择选中的输入元素（复选框或单选按钮） | input:checked { background-color: yellow; } | 选择选中的 <input> 元素。 |
:disabled | 选择禁用的输入元素 | input:disabled { background-color: gray; } | 选择禁用的 <input> 元素。 |
:enabled | 选择启用的输入元素 | input:enabled { background-color: white; } | 选择启用的 <input> 元素。 |
:required | 选择必填的输入元素 | input:required { border: 2px solid red; } | 选择必填的 <input> 元素。 |
:optional | 选择可选的输入元素 | input:optional {border: 2px solid green; } | 选择可选的 <input> 元素。 |
:valid | 选择值合法的输入元素 | input:valid { border: 2px solid blue; } | 选择值合法的 <input> 元素。 |
:invalid | 选择值不合法的输入元素 | input:invalid { border: 2px solid red; } | 选择值不合法的 <input> 元素。 |