如何从 HTML 和 CSS 的有序列表中删除句点？

在 HTML 和 CSS 中自定义有序列表

有序列表是按顺序呈现信息的宝贵工具。但是，默认样式通常在每个数字后面包含一个句点，这可能并不总是理想的。本文探讨如何自定义有序列表并删除句点分隔符。

创建不带句点的有序列表

传统上，从有序列表中删除句点需要创建一个每个数字的自定义类并使用 list-style-image 属性。然而，存在一个仅 CSS 的解决方案，它既优雅又语义：

<code class="css">ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}</code>

此解决方案使用 CSS 计数器和 :before 伪元素来生成自定义编号。 list-style-type 属性设置为 none 以删除默认的项目符号或数字。 counter-reset 属性确保计数器从 1 开始。

浏览器兼容性

需要注意的是，这个解决方案依赖于 :before 伪选择器，它IE6 和 IE7 不支持。对于这些浏览器，可以添加额外的 CSS 规则：

<code class="css">ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}</code>

此规则会覆盖自定义样式并确保 IE6 和 IE7 显示默认编号列表。

以上是如何从 HTML 和 CSS 的有序列表中删除句点？的详细内容。更多信息请关注PHP中文网其他相关文章！