如何在 HTML/CSS 中建立沒有句點的有序列表？

在 HTML/CSS 中建立不帶句點的有序列表

有序列表通常在列表編號後顯示句點。但是，如果您需要透過刪除這些句點來自訂外觀怎麼辦？以下是對可用 HTML 和 CSS 解決方案的探索。

如使用者所提到的，CSS 提供了一種透過自訂樣式來實現此目的的方法。要修改的關鍵 CSS 屬性是：

• list-style-type：刪除預設週期並套用新類型。
• counter-increment 和 counter-reset：建立將產生清單數字的自訂計數器。
• 內容：在偽元素中使用產生的計數器。

以下 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 屬性，您可以建立一個顯示不含句點的數字的有序列表。另外，計數器自增：customlistcounter；屬性可讓您根據需要指定備用分隔符號。

但是，值得注意的是，一些較舊的瀏覽器，例如 IE6 和 IE7，不支援 :before 偽選擇器。為了確保相容性，請考慮新增額外的 CSS 規則來針對這些瀏覽器並使用本機清單樣式外觀：

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

以上是如何在 HTML/CSS 中建立沒有句點的有序列表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！