方法1：

Question

我想制作一个自定义OL，这些应该显示字母而不是元音。这意味着第一个列表项例如是C，然后是D，然后跳过E并转到F.

编辑：有人将此标记为重复。我已经搜索了增量，没有元音，从C开始但没有找到任何指定的东西。

我试过这个

<ol type="A">
<li>Here is C </li>
<li>Here is D</li>
<li>Here is F</li>
<li>Here is G</li>
</ol>

Answer 1

您希望如何执行此操作取决于您要支持的浏览器以及您正在使用的目的。

方法1：

让我们先得到坏消息：在撰写本文时，仅限Mozilla。

在CSS3中有一个相当新的@ -rule @counter-style，它可以完全你想要的东西。
如果您只想显示列表计数器的任何旧符号序列而不是常规递增值，则可以使用此选项。在这种情况下，如果你的理由是你不喜欢元音或其他东西。

＆＃13;

@counter-style novowels {
  system: fixed;
  symbols: B C D F G H J K L M N P Q R S T V W X Z;
  suffix: " ";
}
.consonants > li {
  list-style: novowels;
}

＆＃13;

<ol class="consonants">
  <li>Here is B</li>
  <li>Here is C</li>
  <li>Here is D</li>
  <li>Here is F</li>
  <li>Here is G</li>
</ol>

＆＃13;

（请注意，根据对问题的评论，我也恢复了B。）

方法2：

如果列表项实际上是指辅音本身;也就是说，计数器项具有语义含义，最好只使用常规upper-alpha并将字母的值放在列表项中（其中A的值为1，B为2等）

＆＃13;

.consonants {
  list-style: Upper-alpha;
}

＆＃13;

<ol class="consonants">
  <li value="2">Here is B</li>
  <li value="3">Here is C</li>
  <li value="4">Here is D</li>
  <li value="6">Here is F</li>
  <li value="7">Here is G</li>
</ol>

＆＃13;

虽然这些值实际上仅在范围非顺序的地方需要（在这种情况下，value="2"和value="6"是必需的），但更明确的是他们，以显示哪个项目意味着什么。

HTML中的自定义OL

1 个答案:

方法1：

方法2：