现代 CSS 有哪些值得关注的新特性？

详细解析#

容器查询 @container#

媒体查询看的是视口，容器查询看的是组件所在的容器。同一个卡片组件放在宽的主栏里横排、放在窄的侧栏里竖排，不需要知道页面布局。

用法分两步：给容器声明 container-type，再用 @container 写条件。规则只作用于容器的后代，容器不能根据自己的尺寸改自己的样式。还可以用 cqw、cqi 这类单位，相对容器尺寸取值。

:has() 父选择器#

:has() 匹配"满足条件的后代或兄弟存在"的元素，第一次让 CSS 能根据子元素选中父元素：

• .card:has(img)：包含图片的卡片
• form:has(:invalid)：有不合法输入的表单
• h2:has(+ p)：后面紧跟段落的标题

它的优先级取参数里最高的那个，规则和 :is() 一样，见 选择器优先级。

原生嵌套与 @layer#

原生 CSS 支持嵌套，& 代表父选择器。和 Sass 的区别是：原生 & 不能拼接字符串，&__title 这种 BEM 拼接写法不会生成 .block__title；& 的优先级按 :is() 计算，父选择器是 #a, .b 这样的列表时，嵌套规则一律按其中最高的 ID 优先级算。

@layer 声明层叠层，层的顺序比选择器优先级更先比较，适合把重置样式、第三方库、组件样式分层管理，细节见 选择器优先级。

日常写法的简化#

渐进增强 @supports#

@supports 判断浏览器是否支持某个属性值或选择器，支持时才应用增强样式。旧浏览器拿到基础样式也能用，新浏览器体验更好。

代码示例#

/* 容器查询：卡片在宽容器里横排 */
.card-wrap {
  container-type: inline-size;
  container-name: card;
}

.card { display: grid; gap: 12px; }

@container card (min-width: 420px) {
  .card { grid-template-columns: 160px 1fr; }
}

/* 原生嵌套 + :has() */
.field {
  border: 1px solid #ccc;

  &:has(input:invalid) {
    border-color: crimson;
  }

  & label {
    font-weight: 600;
  }
}

/* 混色：悬停时比品牌色深一些 */
.btn {
  --brand: #3b82f6;
  background: var(--brand);
  &:hover { background: color-mix(in srgb, var(--brand) 80%, black); }
}

/* 渐进增强：支持 :has() 时才启用 */
@supports selector(:has(a)) {
  .menu:has(.item:hover) .item:not(:hover) { opacity: 0.6; }
}

面试官可能追问#

易错点#

• 容器查询的规则只作用于容器的后代，不能用来改容器自身的样式
• 原生嵌套里 &-active、&__title 这类拼接写法不成立，这是 Sass 的语法
• 新特性的兼容性以 caniuse 和 MDN 为准，面试中不要随口报具体的浏览器版本号