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