关于自定义柜台样式，您可能不知道一些事情

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中文网其他相关文章！