现代css标签栏切换应使用:is()统一交互态、:where()防优先级冲突，flex+min-width+white-space实现自适应宽度，@container做容器查询，scroll-snap+inline-size:max-content实现滚动吸附。
用 :is() 和 :where() 简化多状态标签选择
纯 CSS 实现标签栏切换，关键不是写一堆 .tab.active、.tab:hover、.tab:focus，而是用现代选择器一次性覆盖所有交互态。比如：:is(.tab:hover, .tab:focus, .tab[aria-selected="true"]) 能统一处理悬停、焦点和 ARIA 选中态，避免重复声明样式。注意 :is() 不提升优先级，而 :where() 会把优先级归零——如果你的标签栏要被第三方 CSS 覆盖（比如 CMS 主题），用 :where() 更安全。
用 flex + min-width 控制标签自动撑开但不溢出
标签文字长度不一，又得在小屏上自适应，靠 width: 20% 或 grid-template-columns: repeat(5, 1fr) 都容易断行或挤压。正确做法是给 .tabs 容器设 display: flex; flex-wrap: wrap;，每个 .tab 设 flex: 1 1 auto; 和 min-width: max-content; —— 这样标签宽度由文字内容决定，且能随容器缩放；加上 white-space: nowrap; 防止换行，再配合 overflow-x: auto（对容器）应对极端窄屏。
用 @container 做真正的容器查询式响应
媒体查询只看视口，但标签栏常嵌在侧边栏或卡片里，宽度受限于父容器而非屏幕。这时 @container (min-width: 400px) 才是解法。需先给标签栏外层加 container-type: inline-size;，然后写：
/* 小容器：竖排 */
@container (max-width: 360px) {
.tabs { flex-direction: column; }
}
/* 中等容器：横排带滚动 */
@container (min-width: 361px) and (max-width: 720px) {
.tabs { overflow-x: auto; }
}
/* 大容器：均分+过渡 */
@container (min-width: 721px) {
.tab { flex: 1; transition: background-color 0.2s; }
}
注意：Chrome 119+、Firefox 119+ 支持，旧浏览器需降级为媒体查询 fallback。
用 scroll-snap + inline-size 让滚动标签栏“吸附”到项
当标签数量多、启用横向滚动时，用户滑动后常停在两个标签中间，体验差。加三行 CSS 即可修复：
.tabs {
scroll-snap-type: x mandatory;
}
.tab {
scroll-snap-align: start;
inline-size: max-content;
}
其中 inline-size: max-content 是关键——它让每个 .tab 的宽度严格等于内容所需最小宽度，避免因 flex-basis 计算偏差导致吸附错位。别用 width 或 min-width 替代，它们不参与 scroll-snap 对齐计算。
真正难的不是让标签“看起来自适应”，而是让它在不同嵌套深度、不同字体加载时机、不同 zoom 缩放下都保持对齐和可访问性。比如 max-content 在某些字体未加载完成时会误判宽度，此时得配合 font-display: optional 或 JS 监听 fontface.load 后重设容器尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
