關於自定義櫃檯樣式，您可能不知道一些事情

Juan最近在關於@counter-style規則的年鑑條目中，揭示了一些關於樣式列表（特別是列表標記）的極其有趣的內容。您可能已經了解了::marker偽元素。您很可能已經嘗試過使用counter-reset和counter-increment自定義計數器。或者，您的方法可能是清除list-style（這樣做要小心！）並在列表項的::before偽元素上手動滾動標記。

但是您嘗試過@counter-style嗎？事實證明，它做了很多繁重的工作，並開闢了使用列表和列表標記的新方法。

只為一個列表項設置標記樣式

這被稱為設置為特定項目的“固定”系統。

@counter-style style-fourth-item {
  system: fixed 4;
  symbols: "?";
  suffix: " ";
}

li {
  list-style: style-fourth-item;
}

為特定標記分配字符

如果您使用“累加”系統，則可以定義哪些符號屬於哪些列表項。

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

li {
  list-style: dice;
}

請注意，一旦系統達到循環結束，它就會重複，並根據模式中的第一項開始一個新的序列。例如，典型的骰子有六面，我們在第七個列表項上開始擲兩個骰子，總共七個。

為列表標記添加前綴和後綴

很久以前，Chris展示了一種使用列表項的::before偽元素在列表標記末尾插入標點符號的方法：

ol {
  list-style: none;
  counter-reset: my-awesome-counter;

  li {
    counter-increment: my-awesome-counter;

    &::before {
      content: counter(my-awesome-counter) ") ";
    }
  }
}

現在使用@counter-styles更容易了：

@counter-style parentheses {
  system: extends decimal;
  prefix: "(";
  suffix: ") ";
}

設置多個列表項範圍的樣式

假設您有10個項目的列表，但只想設置項目1-3的樣式。我們可以為此設置一個範圍：

@counter-style single-range {
  system: extends upper-roman;
  suffix: ".";
  range: 1 3;
}

li {
  list-style: single-range;
}

我們甚至可以擴展我們之前自己的骰子示例：

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends dice;
  suffix: ".";
  range: 1 3;
}

li {
  list-style: single-range;
}

另一種方法是使用infinite關鍵字作為第一個值：

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends dice;
  suffix: ".";
  range: infinite 3;
}

li {
  list-style: single-range;
}

說到infinite，您可以將其設置為第二個值，它將根據您擁有的列表項數量無限計數。

也許您想一次設置兩個範圍的樣式，並包含項目6-9。我不確定你為什麼想要這樣做，但我相信你（或你的HIPPO）有充分的理由。

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style multiple-ranges {
  system: extends dice;
  suffix: ".";
  range: 1 3, 6 9;
}

li {
  list-style: multiple-ranges;
}

為列表標記添加填充

您是否遇到過列表標記對齊不均勻的情況？這通常發生在從一位數到兩位數時。您可以使用額外的字符填充標記以對齊內容。

/* 为列表项标记添加前导零 */
@counter-style zero-padded-example {
  system: extends decimal;
  pad: 3 "0";
}

現在標記將始終對齊……好吧，最多999個項目。

總結

我認為這些是在CSS中使用列表標記的一些非常有趣的方法，它們與我傳統上處理此類問題的方法相比，更勝一籌。並且隨著@counter-style在2023年9月成為基線“新可用”功能，它在瀏覽器中得到了很好的支持。

以上是關於自定義櫃檯樣式，您可能不知道一些事情的詳細內容。更多資訊請關注PHP中文網其他相關文章！