css3支持哪些新选择器

CSS3 在 CSS2.1 的基础上新增了大量选择器，主要用于更精准地选取元素、减少多余类名、提升开发效率。下面按类别给你梳理一下 CSS3 支持的主要新选择器：

一、属性选择器（增强）

CSS2 已有基础属性选择器，CSS3 增强了匹配规则：

[attr]              /* 拥有该属性 */
[attr="val"]        /* 属性值完全等于 val */
[attr~="val"]       /* 属性值中包含 val（空格分隔） */
[attr|="val"]       /* 以 val 或 val- 开头 */

/* CSS3 新增 */
[attr^="val"]       /* 以 val 开头 */
[attr$="val"]       /* 以 val 结尾 */
[attr*="val"]       /* 包含 val（任意位置） */

✅ 示例：

a[href^="https"] { color: green; }
img[src$=".png"] { border: 1px solid #ccc; }

二、结构伪类选择器（重点）

用于根据元素在文档结构中的位置选择：

:root                  /* 根元素（通常是 html） */
:nth-child(n)          /* 第 n 个子元素 */
:nth-last-child(n)     /* 倒数第 n 个子元素 */
:nth-of-type(n)        /* 同类型第 n 个 */
:nth-last-of-type(n)   /* 同类型倒数第 n 个 */
:first-child
:last-child
:first-of-type
:last-of-type
:only-child            /* 唯一子元素 */
:only-of-type          /* 同类型唯一 */
:empty                 /* 没有任何子节点（包括文本） */

✅ 示例：

li:nth-child(odd) { background: #f0f0f0; }
p:nth-of-type(2) { color: red; }

三、状态伪类选择器（表单 / 交互）

用于根据用户行为或元素状态选择：

:enabled
:disabled
:checked
:indeterminate

:focus
:hover
:active

/* CSS3 新增 UI 状态 */
:required
:optional
:valid
:invalid
:in-range
:out-of-range
:read-only
:read-write

✅ 示例：

input:disabled { opacity: .5; }
input:valid { border-color: green; }

四、否定伪类选择器

:not(selector)

✅ 示例：

li:not(.active) { color: #999; }

五、目标伪类

:target

当 URL 中 #id 匹配元素时生效。

✅ 示例：

#section1:target { background: yellow; }

六、伪元素（CSS3 写法规范）

CSS3 明确使用双冒号：

::before
::after
::first-letter
::first-line
::selection     /* 用户选中文本 */
::placeholder   /* 输入框提示文字 */

✅ 示例：

p::selection { background: yellow; }

七、其他实用选择器

:lang(zh)        /* 语言选择 */
:fullscreen      /* 全屏状态 */

八、总结对比（CSS2 vs CSS3）

如果你愿意，我也可以：

• 给你 常见使用场景示例
• 对比 CSS3 选择器兼容性
• 或按 面试题 / 实战需求 讲解

你想从哪方面深入？