CSS 容器查询与:has()选择器实战：构建自适应卡片布局系统

一、传统响应式设计的局限性

多年以来，前端开发者一直依赖 @media 查询来构建响应式界面。媒体查询基于视口宽度变化切换样式，这在页面级布局中效果良好，但当我们需要组件根据自身容器尺寸而非视口大小来调整样式时，媒体查询就显得力不从心了。想象一个卡片组件，它可能被放在一个狭窄的侧边栏中，也可能出现在宽阔的主内容区——如果只用媒体查询，卡片无法感知自己所在容器的实际宽度，只能统一根据视口变化，这导致组件无法真正实现“一次编写，到处适应”。

幸运的是，现代CSS引入了容器查询（Container Queries）和:has()选择器，这两大特性彻底改变了组件级响应式的开发模式。本文将带你构建一个完整的自适应卡片布局系统，展示如何结合这两种强大的CSS能力。

二、容器查询基础：让组件感知自身容器

容器查询允许我们为元素定义一个“包含上下文”，然后使用@container规则根据该上下文的尺寸来应用样式。这与媒体查询相似，但查询目标从视口换成了父容器。

2.1 定义包含上下文

首先，在父容器上使用container-type属性指定查询轴。inline-size表示仅查询内联尺寸（通常为宽度），size表示同时查询宽度和高度。同时还可以通过container-name为该容器命名，以便在多个容器存在时精确定位。

.card-wrapper {
    container-type: inline-size;
    container-name: card-container;
}

2.2 编写容器查询

然后使用@container规则，指定容器名称和条件，在内部编写样式。这些样式只有在容器满足条件时才会应用于容器内的元素。

@container card-container (min-width: 400px) {
    .card {
        display: flex;
        flex-direction: row;
        gap: 20px;
    }
    .card-image {
        width: 40%;
    }
    .card-body {
        width: 60%;
    }
}

@container card-container (max-width: 399px) {
    .card {
        display: flex;
        flex-direction: column;
    }
    .card-image {
        width: 100%;
    }
}

这组规则让.card组件能够根据其外层.card-wrapper的宽度自动切换为水平或垂直布局。无论.card-wrapper被放置在侧边栏还是主列，卡片都能做出恰当的适应。

三、:has()选择器：父级感知子元素状态

:has()选择器通常被称为“父选择器”，但实际上它可以选择任何包含特定后代的元素。这一能力使得CSS可以基于子元素状态来调整父元素样式，弥补了长期以来只能向下选择的不足。

例如，当卡片包含图片时，我们希望卡片背景变暗；或者当卡片是第一个包含特定类名时，添加边距。语法直观：

/* 当.card内部存在img元素时，改变背景 */
.card:has(img) {
    background-color: #f5f5f5;
}

/* 当卡片被鼠标悬停且内部有一个按钮时，改变按钮颜色 */
.card:has(button):hover button {
    background-color: #0056b3;
}

/* 当表单内部存在无效输入时，显示警告边框 */
.form-group:has(input:invalid) {
    border-color: red;
}

四、构建自适应卡片布局系统

现在我们将容器查询与:has()结合，创建一个灵活的卡片组件。卡片可能包含图片、标题、描述、按钮等，并且会根据容器宽度改变内部排列，同时利用:has()针对内容差异优化样式。

4.1 HTML结构

<div class="card-wrapper">
    <article class="card">
        <img class="card-image" src="thumbnail.jpg" alt="缩略图">
        <div class="card-body">
            <h3 class="card-title">文章标题</h3>
            <p class="card-desc">一段描述文字...</p>
            <button class="card-btn">阅读更多</button>
        </div>
    </article>
</div>

4.2 基础样式

.card-wrapper {
    container-type: inline-size;
    container-name: card-container;
    margin: 20px;
}

.card {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    padding: 15px;
    transition: box-shadow 0.3s;
}

.card-image {
    object-fit: cover;
    border-radius: 6px;
    max-width: 100%;
    display: block;
}

.card-title {
    font-size: 1.2em;
    margin: 10px 0;
}

.card-desc {
    color: #555;
    line-height: 1.5;
}

.card-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

4.3 容器查询驱动布局切换

/* 窄容器：竖排布局 */
@container card-container (max-width: 350px) {
    .card {
        flex-direction: column;
        text-align: center;
    }
    .card-image {
        width: 100%;
        height: 150px;
    }
    .card-title {
        font-size: 1em;
    }
    .card-desc {
        font-size: 0.85em;
    }
}

/* 中等容器：水平排布，图片在左 */
@container card-container (min-width: 351px) and (max-width: 600px) {
    .card {
        display: flex;
        flex-direction: row;
        gap: 15px;
        align-items: center;
    }
    .card-image {
        width: 35%;
        height: 120px;
    }
    .card-body {
        flex: 1;
    }
}

/* 宽容器：大图顶部，内容下方 */
@container card-container (min-width: 601px) {
    .card {
        display: block;
    }
    .card-image {
        width: 100%;
        height: 200px;
    }
    .card-body {
        padding: 10px 0;
    }
}

4.4 用:has()微调特殊状态

/* 含有图片的卡片背景微调 */
.card:has(.card-image) {
    background: linear-gradient(to bottom, #fff, #f9f9f9);
}

/* 当卡片没有标题时，增大描述字体 */
.card:not(:has(.card-title)) .card-desc {
    font-size: 1.1em;
}

/* 当按钮存在时，悬停卡片整体阴影 */
.card:has(.card-btn):hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

现在，这个卡片组件具备了真正的环境感知能力：它根据父容器宽度自动调整布局，同时根据自身包含的内容（是否有图片、是否有按钮等）微调视觉表现。你可以将这个.card-wrapper放置在任何宽度的网格列中，它都会完美适配，无需额外修改任何CSS。

五、高级应用：嵌套容器查询与组合选择器

容器查询允许嵌套。例如，一个仪表盘组件内部包含多个卡片容器，每个卡片容器都可以有自己独立的查询。结合:has()可以实现十分智能的布局配置。

.dashboard {
    container-type: inline-size;
    container-name: dashboard;
}

/* 当仪表盘宽度足够时，改变内部卡片的容器查询行为 */
@container dashboard (min-width: 800px) {
    .card-wrapper {
        container-type: inline-size;
        container-name: card-container;
    }
    /* 可为宽仪表盘内的卡片设定特定的预设样式 */
}

/* 利用:has()检测仪表盘内是否有紧急通知卡片，改变整体背景 */
.dashboard:has(.card.urgent) {
    border-left: 4px solid red;
}

六、浏览器兼容性与渐进增强

容器查询和:has()在现代浏览器中已获得广泛支持。Chrome 105+、Edge 105+、Safari 16+以及Firefox 110+均完整支持这两项特性。对于仍在使用老旧浏览器的用户，这些样式将不会生效，但卡片基础样式仍然保留，页面不会因此崩溃。这是一种自然的渐进增强：支持的浏览器获得更优的响应式体验，不支持的浏览器看到的是固定布局。

可以使用@supports进行特性检测：

@supports (container-type: inline-size) {
    /* 容器查询支持的样式 */
}

@supports selector(:has(*)) {
    /* :has() 支持的样式 */
}

七、总结

容器查询和:has()选择器是现代CSS的两大里程碑，它们将响应式设计的粒度从页面级细化到了组件级。通过本文的卡片布局系统实战，我们见证了组件如何根据自身容器尺寸自主调整内部结构，以及如何根据子元素内容动态改变父级样式。这些新能力大幅减少了JavaScript的介入，让样式逻辑回归CSS本身，使代码更清晰、可维护性更强。随着浏览器支持的全面覆盖，现在正是将这些技术融入日常开发的最佳时机。