css新特性 - 技术栈

一、:has()、:is()、:where()选择器

1、:has()

:has(selector)：选择包含selector所匹配元素的那个元素

场景：若干个同层级的卡片，当卡片内有图片时，改变卡片样式

css 复制代码

.card:has(img){
	border: 2px solid red;
}

2、:has()和:where()

功能上，两者一模一样，为匹配选择器列表中的任何一个，区别在于权重！
:is()的权重，等于它括号里所有选择器中，权重最高的那个。(简化选择器，并且能正常覆盖默认样式时使用)
:where()的权重，永远是0。（希望提供一个可以被轻松覆盖的默认样式时使用）

场景：给文章里所有标题（h1-h6）应用统一样式

css 复制代码

article :is(h1,h2,h3,h4,h5,h6) {
	color: #333;
}
article :is(h1,h2,h3,h4,h5,h6):hover {
	color: red;
}

二、aspect-ratio 保持元素宽高比

可以使用aspect-ratio属性的元素：div、img、video、canvas、自定义元素

1、场景：有一个div元素，让其始终保持16：9的宽高比

css 复制代码

/* 选中所有 class 为 video-container 的 div 元素 */
div.video-container {
    /* 设置元素的宽度为父元素宽度的 100% */
    width: 100%;
    /* 设置元素的宽高比为 16:9 */
    aspect-ratio: 16 / 9;
}

2、场景：有一张图片，让其保持原有宽高比

css 复制代码

/* 选中所有的 img 元素 */
img {
    /* 设置图片的最大宽度为 100%，防止图片超出父元素 */
    max-width: 100%;
    /* 设置图片的宽高比为其固有宽高比，也就是保持原始比例 */
    aspect-ratio: auto;
    /* 让图片内容在元素内居中显示 */
    object-fit: contain; // 让图片在元素里完整显示，不会被裁剪
}

3、问题1：当元素宽度增加到max-width所设定的最大值，由于aspect-ratio会维持宽高比，高度可能会超出预期。可以结合max-height属性限制高度，确保高度不会超出预期。

css 复制代码

 .box {
    /* 限制元素的最大宽度为 500px */
    max-width: 500px;
    /* 限制元素的最大高度为 200px */
    max-height: 200px;
    /* 设置元素的宽高比为 2:1 */
    aspect-ratio: 2 / 1;
    background-color: lightblue;
}

4、问题2：在响应式布局，随着屏幕尺寸的变化，max-width和aspect-radio可能会让元素尺寸变得不符合预期。可以借助媒体查询依据不同的屏幕尺寸调整max-width和aspect-radio的值。

css 复制代码

.box {
    /* 设置元素的最大宽度为 100%，使其能自适应父元素宽度 */
    max-width: 100%;
    /* 设置元素的宽高比为 2:1 */
    aspect-ratio: 2 / 1;
    background-color: lightgreen;
}
/* 当屏幕宽度小于等于 768px 时，调整样式 */
@media (max-width: 768px) {
    .box {
        /* 将最大宽度调整为 300px */
        max-width: 300px;
        /* 将宽高比调整为 1:1 */
        aspect-ratio: 1 / 1;
    }
}

6、自定义元素使用aspect-ratio属性

javascript 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        custom-box {
            /* 设置自定义元素的最大宽度为 100% */
            max-width: 100%;
            /* 设置自定义元素的宽高比为 3:2 */
            aspect-ratio: 3 / 2;
            display: block;
            background-color: lightyellow;
        }
    </style>
    <script>
        class CustomBox extends HTMLElement {
            constructor() {
                super();
            }
        }
        customElements.define('custom-box', CustomBox);
    </script>
</head>

<body>
    <custom-box></custom-box>
</body>

</html>

三、scroll-behavior 平滑滚动

规定当用户点击可滚动框中的链接时，是否平滑地（具动画效果）滚动位置，而不是直线跳转

1、场景：为文档添加平滑滚动效果

css 复制代码

html{
	scroll-behavior: smooth;
}

2、属性值

auto：默认值，允许在滚动框内的元素间直接跳转的"滚动效果"；

smooth：允许在滚动框内的元素间平滑的"滚动效果"；

inherit：从其父元素继承此属性。

四、backdrop-filter 毛玻璃背景

允许开发者为元素后面的内容添加图形效果，比如模糊、颜色偏移等

1、基本语法

css 复制代码

backdrop-filter: <filter-function> [ <filter-function> ]*;

filter-function可以是以下几种：

blur(px)：模糊效果
brightness(值)：亮度调整
contrast(值)：对比度调整
grayscale()：灰度转换
hue-rotate(deg)：色调旋转
invert()：反转颜色
opacity()：透明度调整
saturate(值)：饱和度调整
sepia()：棕褐色转换
drop-shadow()：投影效果

2、使用示例

（1）背景模糊 blur(px)，值越大越模糊，用于实现毛玻璃效果

css 复制代码

.glass-effect {
  background: rgba(255, 255, 255, 0.2); /* 半透明白色 */
  backdrop-filter: blur(10px); /* 模糊背后内容 */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 半透明边框增强质感 */
}

（2）调整背景亮度brightness(值)

取值;

0：完全黑色；
1 或 100%：原始亮度；
大于1：调亮（比如1.5表示亮度增加50%）；
小于1：调暗（比如0.5表示亮度降低50%）。

css 复制代码

.dimmed-bg {
  background: rgba(0, 0, 0, 0.3); /* 半透明黑色 */
  backdrop-filter: brightness(0.6); /* 背后内容亮度降低40% */
}

（3）调整对比度contrast(值)

取值：

0：完全灰色；
1或100%：原始对比度；
大于1：提高对比度（比如1.2增强20%）；
小于1：降低对比度（比如0.8降低20%）。

css 复制代码

.high-contrast {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: contrast(1.5) blur(4px); /* 提高对比度+轻微模糊 */
}

3、注意事项

（1）backdrop-filter可能会对页面性能产生影响，特别是在复杂的布局和大量使用滤镜的情况下；

（2）为了使backdrop-filter生效，元素必须具有背景，否则滤镜效果将不会应用到任何内容上，可以通过设置background-color或background-image等属性自定义元素背景；

（3）该属性应用于元素的背后内容，而不是元素本身，不会影响到元素内部的内容或子元素，同时如果元素不在层叠上下文中则滤镜效果可能无法正确显示。

五、CSS 原生嵌套

您可以将任何选择器嵌套在另一个选择器中，但它必须以符号开头，例如 &, .（类选择器）、#（ID选择器）、@（对于媒体查询）、:、::、+、 ~、 > 或 [。换句话说，它不能是对 HTML 元素的直接引用。

传统写法：

css 复制代码

.card {
    ... }
.card:hover {
    ... }
.card .title {
    ... }

嵌套写法：

css 复制代码

/* 嵌套 */
.card {
  &:hover {
    ... }  
  .title {
    ... }  /* 直接嵌套！ */
}

css 复制代码

.parent1 {
  & p {
    color: blue;
  }
}

六、text-wrap属性

取值：

wrap：默认值，表示文字在宽度不足的时候进行换行；
nowrap：表示文字不换行，永远一行显示；（white-space:nowrap;）
balance：智能平衡多行文本，标题文字自动优化换行，让一段在限定宽度的容器内折成多行的文本保证每一行的宽度大致相当（多行文字平均的换行），不改变容器的宽度。