首页 › CSS › CSS 架构与现代特性 › 现代 CSS 新特性

:has() 父级选择器

被称为"CSS 的父选择器"——根据子元素选择父元素：

/* 包含 .active 子元素的 .card */
.card:has(.active) {
  border-color: #1890ff;
}

/* 有图片的卡片用 grid 布局 */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

/* 空表单不显示提交按钮 */
form:not(:has(input:checked)) .submit-btn {
  display: none;
}

/* 前后都有内容的项 */
.item:has(+ .item) {
  border-bottom: 1px solid #ddd;
}

@scope 样式作用域

限制样式只作用于子树范围内：

@scope (.card) {
  /* 仅 .card 内的 p 生效 */
  p { margin: 8px 0; }

  /* 突破作用域（仅作用于根层级的 p） */
  @scope (.card) to (.footer) {
    /* .card 到 .footer 之间（不含 .footer 内） */
  }
}

CSS Nesting 原生嵌套

.card {
  background: white;

  & .title {
    font-size: 1.25rem;
  }

  & .body {
    padding: 16px;
  }

  &:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  @media (min-width: 768px) {
    display: grid;
  }
}

content-visibility

延迟渲染屏幕外的元素，大幅提升首屏性能：

.lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: 500px;  /* 预估高度，防止滚动跳动 */
}

contain 属性

.element {
  contain: strict;      /* 完全隔离 */
  contain: content;     /* 隔离布局+样式+绘制 */
  contain: layout;      /* 仅布局隔离 */
  contain: paint;       /* 仅绘制隔离 */
  contain: size;        /* 尺寸隔离 */
}

小结

特性	用途
:has()	父级选择器，根据子元素选父元素
@scope	样式作用域限制
CSS Nesting	原生嵌套 &
content-visibility	延迟渲染提升性能
container-type	容器查询

上一节：层叠层级 @layer

贡献者: 布欧-Lewyon