现代 CSS 特性概览

W3C 以独立模块持续演进 CSS（并无官方的「CSS4」版本号）。下列特性在现代浏览器中已广泛可用，用于布局、组件化样式与国际化；细节可跳转专题文档。

布局

特性	文档
Flexbox 弹性盒	一维排列与对齐
Grid 网格	二维轨道与区域
容器查询	按父容器而非视口响应
Subgrid	子网格继承父网格轨道，嵌套对齐列/行；见 Grid
原生 CSS 嵌套	无 Sass 变量/混入，仅选择器嵌套；见 Sass · 语法基础

css

.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.child {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 3;
}

subgrid 需子项为 grid 容器，并在 grid-template-rows / grid-template-columns 中使用 subgrid 关键字；浏览器支持见 MDN subgrid 兼容性表。

逻辑属性（国际化）

按**行向（inline）与块向（block）**描述尺寸与间距，随 writing-mode / direction 自动映射物理方向（LTR/RTL）。

物理属性	逻辑属性示例
`width`	`inline-size`
`height`	`block-size`
`margin-left`	`margin-inline-start`
`padding-top`	`padding-block-start`
`left` / `right`	`inset-inline-start` / `inset-inline-end`

选择器

`:has()`（关系伪类）

根据子树或后续兄弟是否匹配，为祖先或前面的元素设样式（常称「父选择器」，实为关系选择器）。

css

.card:has(img) {
    padding: 0;
}
.form:has(:invalid) {
    border-color: red;
}

`:not()` 多参数

css

article :not(h1, h2, h3) {
    line-height: 1.6;
}

`:is()` 与 `:where()`

二者都接受选择器列表，简化重复书写；特异性不同：

伪类	特异性	典型用途
`:is(.a, .b)`	取列表中最高特异性	合并多种状态：`button:is(:hover, :focus-visible)`
`:where(.a, .b)`	恒为 0	低优先级重置，便于后续覆盖

css

:where(ul, ol) {
    margin-block: 0;
    padding-inline-start: 1.5rem;
}
.card:is(.featured, :has(.badge)) {
    border-color: var(--accent);
}

作用域（`@scope`）

将选择器匹配限制在某一子树内，并可声明与全局样式的边界（@scope … to），减少「工具类误伤组件内部」或 BEM 层级过深的问题。

css

@scope (.card) to (.card > *) {
    .title {
        font-size: 1.25rem;
    } /* 仅 .card 内部生效，且受 to 边界约束 */
}

层叠层（`@layer`）

显式控制层叠顺序：后声明的层优先级高于先声明的层（同一层内仍按选择器特异性）。

css

@layer reset, base, components, utilities;

@layer components {
    .btn {
        background: blue;
    }
}
@layer utilities {
    .btn {
        background: red;
    } /* 覆盖 components 中的 .btn */
}

未放入 @layer 的样式优先级高于所有命名层。用于拆分 reset、组件库与工具类，减少 !important 滥用。

组件与样式

特性	说明
容器查询	见响应式
`accent-color`	原生控件（checkbox、radio、range 等）强调色
Flex `gap`	Flex 与 Grid 均支持 `gap`
`color-mix()` / `oklch()`	见颜色与背景
`color-scheme`	告知 UA 页面倾向浅色/深色，影响滚动条、表单控件等默认绘制
`light-dark()`	在 `color-scheme: light dark` 下按用户配色方案取不同颜色值
`aspect-ratio`	在宽或高为 `auto` 时维持宽高比，如 `aspect-ratio: 16 / 9`
`@property`	注册自定义属性类型、继承与初始值，便于动画插值

css

:root {
    accent-color: #ff4757;
    color-scheme: light dark;
    --text: light-dark(#222, #eee);
}
.video {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}
@property --progress {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

排版

css

/* 流式字号，见 font-unit.md */
h1 {
    font-size: clamp(1.5rem, 5vw + 1rem, 3rem);
}

/* 首字下沉（initial-letter）；支持度见 MDN 兼容性表 */
p::first-letter {
    initial-letter: 2;
}

滚动与视图过渡

特性	说明
Scroll-driven animations	用 `animation-timeline: scroll()` 等将动画与滚动进度绑定（见 MDN）
View Transitions API	文档/同文档导航间通过 `view-transition-name` 与 `::view-transition-*` 做过渡（多用于 SPA 路由切换）
`scroll-snap`	`scroll-snap-type` + `scroll-snap-align` 实现轮播、分页吸附

css

@supports (animation-timeline: scroll()) {
    .progress {
        animation: grow linear forwards;
        animation-timeline: scroll(nearest block);
    }
}

渐进增强（`@supports`）

在不支持某属性时提供回退，避免整段样式被忽略：

css

.card {
    background: #fff;
}
@supports (color: oklch(0% 0 0)) {
    .card {
        background: oklch(98% 0.01 250);
    }
}

使用建议

用 @supports 或分层样式做渐进增强，而非依赖未文档化的 hack。
构建工具（PostCSS、Autoprefixer）可补部分前缀；IE 已停止支持，无需再为其单独设计。
新特性上线前查 Can I use 与项目最低浏览器版本。

总结

现代 CSS 围绕：更强布局（Grid/Flex/Subgrid）、组件化响应（容器查询、:has()、@layer）、国际化与可维护性（逻辑属性、新颜色空间、clamp）。

参考文献

以下链接在编写时均可正常访问：

资料	说明
MDN：:has()	关系伪类
MDN：@layer	层叠层
MDN：CSS 逻辑属性	逻辑属性与值
MDN：subgrid	子网格
MDN：accent-color	强调色
MDN：color-mix()	颜色混合
MDN：:is() / ()	选择器列表伪类
MDN：@scope	作用域
MDN：aspect-ratio	宽高比
MDN：@property	注册自定义属性
MDN：Scroll-driven animations	滚动驱动动画（英文）
MDN：@supports	特性查询
Can I use	特性浏览器支持查询（作辅助，以 MDN 为准）