现代原生 CSS 四大变革：父选择器 :has()、容器查询 @container、层叠层 @layer 与 View Transitions API 实战
过去需要依赖 JavaScript 监听 DOM、ResizeObserver 或预处理器才能实现的布局与状态控制，随着 :has()、容器查询（@container）、层叠层（@layer）和原生视图过渡（View Transitions API） 在所有现代浏览器全量落地，已全面回归纯原生 CSS。
一、 现代 CSS 四大核心特性作用与应用场景对比
| 新特性 | 解决的历史痛点 | 核心语法与工程收益 |
|---|---|---|
父/前驱选择器 :has() |
CSS 只能向下选择子代，无法根据“是否包含某子元素或子表单状态”反向控制父容器样式 | .card:has(img)（有图卡片切换双列布局）、form:has(:invalid) button[type="submit"]（纯 CSS 禁用提交态） |
容器查询 @container |
@media 媒体查询只能看整个浏览器视口宽度，同一个组件放在窄侧边栏和宽主栏无法自适应 |
组件根据自身父容器的实际可用宽度（container-type: inline-size）独立切换横排/竖排，实现真正的组件级响应式 |
层叠层 @layer |
第三方 UI 库样式与业务自定义样式特异性权重冲突，被迫到处写 !important |
显式声明层叠顺序 @layer reset, ui-lib, utilities, overrides;——后声明的层无条件优先于先声明的层，无视内部选择器权重高低！ |
| View Transitions API | 页面/状态切换时的平滑共享元素形变动画（FLIP）手写极度复杂 | 调用 document.startViewTransition(() => updateDOM())，浏览器自动截取前后帧快照并执行硬件加速交叉淡入淡出与位置补间 |
二、 四大特性实战代码示范
/* 1. @layer：彻底终结 !important 大战，base 层权重再高也赢不了 overrides 层 */
@layer reset, third-party, components, utilities;
@layer third-party {
#app .btn.btn-primary { background: gray; } /* 即使带 ID 选择器权重极高 */
}
@layer components {
.btn-primary { background: #2563eb; } /* 依然胜出！因为 components 层排在 third-party 之后 */
}
/* 2. :has() 父选择器：当卡片内部包含勾选的复选框时，高亮整张卡片边框；当打开弹窗时锁死 body 滚动 */
.task-card:has(input[type="checkbox"]:checked) {
background-color: #f0fdf4;
border-color: #16a34a;
}
body:has(dialog[open]) {
overflow: hidden; /* 零 JS 实现弹窗打开时锁定背景滚动！ */
}
/* 3. @container 容器查询：卡片根据所在容器宽度（而非屏幕宽度）自动切换布局 */
.card-slot {
container-type: inline-size;
container-name: card-box;
}
@container card-box (min-width: 480px) {
.product-card {
display: grid;
grid-template-columns: 180px 1fr;
}
}