CSS中.container.\31 25\25是什麼意思？

反斜線字元()用於轉義特殊字元CSS，例如百分號 (%)$。這允許使用原本無效的標識符，例如包含某些標點符號的標識符。

在提供的範例中，反斜線用於轉義類別名稱 .container 中的百分號。 \ 31 25\25。這導致類別名稱等同於 .container[class ~= "125%"]，這表示任何具有類別 "125%" 的元素都會套用相同的樣式規則。

此技術可用於根據各種標準建立動態類別名稱。例如，以下程式碼可用於建立一系列類，這些類別根據元素的容器大小設定元素的寬度：

.container.\31 25\25 {
  width: 100%;
  max-width: 1500px;  /* max-width: (containers * 1.25) */
  min-width: 1200px;  /* min-width: (containers) */
}
.container.\37 5\25 { /* 75% */
  width: 900px;       /* width: (containers * 0.75) */
}
.container.\35 0\25 { /* 50% */
  width: 600px;       /* width: (containers * 0.50) */
}
.container.\32 5\25 { /* 25% */
  width: 300px;       /* width: (containers * 0.25) */
}

這允許根據其容器大小輕鬆調整元素的寬度，而無需手動建立具有不同百分比值的多個類別。