CSS 4 中的一些新特性-css教程-PHP中文网

CSS 4 中的一些新特性

DDD

发布： 2024-10-30 17:01:02

原创

857 人浏览过

在本文中，我们将探索 2024 年的一些新 CSS 功能。

如果你喜欢我的文章，可以请我一杯咖啡:)
Some new features CSS in 4

1.CSS容器查询

容器查询允许您根据项目容器的大小将样式应用于项目。容器查询的工作方式类似于媒体查询。

使用容器查询

使用容器查询，您可以根据父元素内的子元素的大小动态调整子元素的样式。

为此，您必须首先为父元素定义一个容器上下文。您可以使用容器类型属性来指定它。

容器类型：尺寸；设置为时，可以同时按宽度和高度值进行查询。
容器类型：内联大小；设置为时，仅对宽度（水平尺寸）进行查询。

借助此功能，子元素的样式属性可以根据父元素的大小进行更改。

示例 :

 <div class="post">
        <div class="card">
          <h2>Card title</h2>
          <p>Card content</p>
        </div>
  </div>

登录后复制

.post {
    container-type: size;
  }

  .card h2 {
    font-size: 1em;
    color: blue;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 5em;
      color: purple;
    }
  }

登录后复制

输出 :

Some new features CSS in 4

2.CSS嵌套

使用 CSS 嵌套，您可以将一个规则放置在另一个规则中。这对于管理依赖于上下文的样式特别有用。例如，如果您有一个 .container 类并想要为其 .item 元素设置样式，您可以直接在 .container 规则内编写 .item 规则。 CSS 嵌套由浏览器直接解析。 这意味着您不需要预处理器来编译嵌套规则；它们在浏览器中本地工作。

示例 :

<form>
        <label for="name">Name:
          <input type="text" id="name" />
        </label>
        <label for="surname">Surname:</label>
        <input type="text" id="surname" />
      </form>

登录后复制

 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

登录后复制

输出 :

Some new features CSS in 4

3. :scope 伪类

范围选择器用于定义 CSS 中样式的范围。

用法：

如果 :scope 位于 CSS 的 根级别，则相当于 :root

示例 :

<html></html>

登录后复制

:scope {
  background-color: orange;
}

登录后复制

输出 :

Some new features CSS in 4

在 @scope 块中使用 :scope 可以根据类名定义的上下文实现清晰且有针对性的样式。

示例 :

 <div class="post">
        <div class="card">
          <h2>Card title</h2>
          <p>Card content</p>
        </div>
  </div>

登录后复制

.post {
    container-type: size;
  }

  .card h2 {
    font-size: 1em;
    color: blue;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 5em;
      color: purple;
    }
  }

登录后复制

输出 :

Some new features CSS in 4

4. :has() 伪类

CSS 中的 :has() 选择器允许您设置 父元素的样式（如果它包含特定的子元素。

）

示例 :

<form>
        <label for="name">Name:
          <input type="text" id="name" />
        </label>
        <label for="surname">Surname:</label>
        <input type="text" id="surname" />
      </form>

登录后复制

 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

登录后复制

输出 :

Some new features CSS in 4