如何從 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中文網其他相關文章！