html - HTML 中的自定义 OL

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

您希望如何执行此操作取决于您希望支持哪些浏览器，以及您使用它的目的。

方法一:

让我们先说个坏消息:在撰写本文时，仅限 Mozilla。

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

@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;
}

<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>

(请注意，根据对问题的评论，我还恢复了 B。)

方法二:

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

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

<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>

尽管值确实只在范围不连续的地方才需要(在这种情况下，value="2" 和 value="6" 是必要的)，把它们都放进去更清楚，以显示哪个项目意味着什么。