🚀 第九章：现代适应性特性
掌握 2026 年的 CSS 新标准
9.1 容器查询 (Container Queries)
容器查询是 CSS 中最革命性的特性之一，它允许元素根据其父容器的大小而不是视口大小来响应。
基本语法
/* 定义容器 */
.card-container {
container-type: inline-size;
}
/* 容器查询 */
@container (min-width: 400px) {
.card {
display: flex;
}
}容器类型
- size - 同时考虑宽度和高度
- inline-size - 只考虑宽度（最常用）
- block-size - 只考虑高度
容器命名
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card {
display: flex;
}
}容器查询示例
卡片标题
这是一张卡片，当容器宽度大于 400px 时会变成水平布局。
卡片标题
这是一张卡片，当容器宽度大于 400px 时会变成水平布局。
9.2 层级查询 (Cascade Layers)
层级查询解决了 CSS 优先级冲突的问题，让样式管理更加清晰。
基本语法
/* 定义层级 */
@layer reset {
* {
margin: 0;
padding: 0;
}
}
@layer base {
body {
font-family: Arial, sans-serif;
}
}
@layer components {
.button {
padding: 10px 20px;
}
}层级的优先级
后定义的层级会覆盖先定义的层级，无论选择器的特异性如何。
最佳实践：按照以下顺序定义层级：
1. 重置样式 (reset)
2. 基础样式 (base)
3. 组件样式 (components)
4. 实用工具 (utilities)
5. 自定义样式 (custom)
9.3 作用域样式 (Scoping)
作用域样式允许你限制样式的有效范围，避免样式污染。
@scope (.card) {
h3 {
color: #3498db;
}
p {
line-height: 1.6;
}
}作用域的优势
- 避免样式冲突
- 提高代码可维护性
- 减少 CSS 体积
- 使样式更加模块化
实战案例
响应式卡片布局
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.card {
container-type: inline-size;
}
@container (min-width: 300px) {
.card-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 15px;
}
}层级管理
@layer reset {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
}
@layer framework {
.btn {
padding: 8px 16px;
border: 1px solid #ddd;
}
}
@layer custom {
.btn {
background: #3498db;
color: white;
}
}动手练习
练习 1：容器查询实践
- 创建一个卡片组件
- 为卡片容器添加 container-type
- 使用容器查询实现不同容器大小下的不同布局
- 测试不同容器大小的显示效果
练习 2：层级管理
- 使用 @layer 定义不同的样式层级
- 测试层级的优先级
- 尝试覆盖不同层级的样式
练习 3：作用域样式
- 使用 @scope 为特定组件创建作用域样式
- 测试作用域样式的隔离效果
- 比较作用域样式与传统 CSS 的区别