Web前端之Css新特性速览与选择器全览、选择器

2025年CSS新特性速查表

分类	特性/属性	示例	作用
布局	@container + container-type	css .card { container-type: inline-size; } @container (min-width: 400px) { .card { font-size: 2rem; } }	容器查询，替代媒体查询
—	subgrid	css .child { display: grid; grid-template-columns: subgrid; }	子网格，继承父网格轨道
—	逻辑属性	css margin-inline: 1rem; padding-block: 2rem;	适配多语言布局
—	新单位	css height: 100dvh; width: 50cqw;	dvh/svh/lvh解决移动端视口问题；cqw/cqh容器单位
选择器	:has()	css .card:has(img) { border: 1px solid red; }	父选择器，判断内部内容
—	:is() / :where()	css :is(h1,h2,h3){color:blue;}	简化多选择器
—	@scope	css @scope(.form){input{border:1px solid red;}}	局部CSS作用域
—	:state()(实验性)	css button:state(loading){opacity:.5;}	定义组件状态样式
颜色	lab()/lch() / oklab()/oklch()	css color: oklch(70% .2 250);	更自然、更广色域颜色
—	color(display-p3 …)	css color: color(display-p3 1 0 0);	支持P3色域
字体	font-palette	css p{font-palette: light;}	彩色字体调色板
—	font-variation-settings	css h1{font-variation-settings:"wght" 700;}	可变字体精细控制
—	line-height-step	css p{line-height-step:1.5rem;}	行高对齐到基线网格
表单	accent-color	css input[type=checkbox]{accent-color: hotpink;}	表单控件主题色
动画/滚动	scroll-timeline+animation-timeline	css .box{animation:fade 1s linear; animation-timeline:scroll();}	滚动驱动动画
—	view-timeline(实验性)	css .section{animation-timeline:view();}	元素进入视口时触发动画

速记口诀
布局革命：容器查询、子网格、新单位
选择器革命：:has()、:is()、@scope
颜色革命：oklch()、P3
动画革命：scroll-timeline
表单&字体：accent-color、font-palette

CSS选择器全览（2025版）

基础选择器

最基本的选择器，用来直接选定元素。

选择器	示例	含义
通配符*	* { margin:0; }	选中所有元素
元素选择器	p { color:red; }	选中所有<p>标签
类选择器	.box { padding:10px; }	选中class="box"的元素
ID选择器	#main { width:100%; }	选中id="main"的元素
属性选择器	input[type="text"] { … }	选中属性满足条件的元素

组合选择器

通过逻辑关系组合元素。

选择器	示例	含义
后代选择器	div p { … }	选中div内所有p
子选择器>	div > p { … }	选中 div的直接子元素p
相邻兄弟选择器+	h1 + p { … }	选中紧跟在h1后的p
普通兄弟选择器~	h1 ~ p { … }	选中与h1同级的所有后续p
群组选择器,	h1, h2 { … }	同时选中h1和h2

属性选择器

可以精确匹配属性值。

语法	示例	含义
[attr]	input[disabled]	含有该属性
[attr="value"]	a[target="_blank"]	属性等于某值
[attr^="val"]	a[href^="https"]	属性值以某值开头
[attr$="val"]	img[src$=".png"]	属性值以某值结尾
[attr*="val"]	a[href*="login"]	属性值包含某值
[attr~="val"]	[class~="btn"]	属性值是空格分隔的词列表，包含某词
[attr|="val"]	[lang|="en"]	属性等于某值或以某值-开头

伪类选择器（旧有）

针对元素的状态。

选择器	示例	说明
:hover	a:hover	鼠标悬停
:active	a:active	激活时（点击时）
:focus	input:focus	获取焦点
:visited	a:visited	已访问的链接
:first-child	li:first-child	父元素的第一个子
:last-child	li:last-child	父元素的最后一个子
:nth-child(n)	li:nth-child(2n)	选中第n个子元素
:nth-last-child(n)	li:nth-last-child(1)	倒数第n个子元素
:only-child	div:only-child	父元素唯一的子元素
:empty	p:empty	没有内容的元素
:not(sel)	:not(.disabled)	取反

伪元素选择器

表示元素的虚拟部分。

选择器	示例	说明
::before	p::before { content:"★"; }	在内容前插入
::after	p::after { content:"✓"; }	在内容后插入
::first-letter	p::first-letter	第一个字母
::first-line	p::first-line	第一行
::selection	p::selection	用户选中文本时

UI状态伪类

和表单、交互相关。

选择器	示例	说明
:checked	input:checked	被选中的复选框/单选框
:disabled	input:disabled	禁用状态
:enabled	input:enabled	启用状态
:required	input:required	必填
:optional	input:optional	非必填
:read-only	input:read-only	只读
:read-write	input:read-write	可编辑
:valid	input:valid	验证通过
:invalid	input:invalid	验证失败
:in-range/:out-of-range	input:in-range	范围内/外

新增/现代选择器（2020+）

选择器	示例	说明
:is()	:is(h1,h2,h3)	简化选择器，权重正常
:where()	:where(h1,h2,h3)	同上，但权重为 0
:has()	.card:has(img)	父选择器，包含关系
:focus-within	form:focus-within	父元素内有子元素获得焦点
:focus-visible	button:focus-visible	仅键盘导航时触发
:any-link	a:any-link	匹配所有链接（未访问+已访问）

CSS4/2025实验性选择器

部分浏览器支持，需要加实验性标志。

选择器	示例	说明
:state()	button:state(loading)	自定义组件状态（实验性）
@scope	@scope(.form){input{…}}	作用域选择器，避免全局污染
:has(:focus)	.field:has(input:focus)	父元素根据子元素焦点变化
:nth-child(an+b of selector)	li:nth-child(2 of .active)	nth-child 的进阶版

总结口诀

基本：元素、类、ID、属性
层级：后代、子、兄弟
伪类：状态（hover、focus）、结构（nth-child）
伪元素：before、after、first-letter
UI：checked、disabled、valid/invalid
现代：is、where、has、focus-visible
未来：@scope、:state()、nth-child of