我認(rèn)為這個(gè)問題的答案是否定的...但是有沒有人知道用HTML/CSS的方法創(chuàng)建一個(gè)有序列表，在數(shù)字后面沒有句號(hào)？或者，指定分隔符？

理想情況下，我不想做列表樣式的圖像，每個(gè)數(shù)字都有不同的類，但這是我目前所能想到的...這似乎很不自然。

即:

Default Style:
1. ______
2. ______
3. ______

Desired Style:
1  ______
2  ______
3  ______

Alternate Style:
1) ______
2) ______
3) ______

只用CSS (2.1)就完全可以做到這一點(diǎn):

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

請(qǐng)記住，這個(gè)解決方案依賴于:before偽選擇器，所以一些舊的瀏覽器——特別是IE6和IE7不會(huì)呈現(xiàn)生成的數(shù)字。對(duì)于這些瀏覽器，您需要添加一個(gè)額外的CSS規(guī)則，只針對(duì)它們使用普通的列表樣式:

ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}

以下是解決方案

HTML中嵌套有序列表數(shù)量

你所要做的就是在這里做一點(diǎn)點(diǎn)改變

ol li:before {
                content: counter(level1) " "; /*Instead of ". " */
                counter-increment: level1;
            }

^^

這可以通過使用::marker CSS偽元素來實(shí)現(xiàn)，它有很好的瀏覽器支持。

但是請(qǐng)注意，Safari在支持內(nèi)容屬性方面有一個(gè)突出的缺陷，所以這種方法在那里不起作用。在某些情況下，這可能是沒問題的，因?yàn)榛赝诵袨閷⒅伙@示額外的句點(diǎn)。

ol { counter-reset: my-counter-name; }

li { counter-increment: my-counter-name; }

li::marker { content: counter(my-counter-name); }

我剛剛找到了一個(gè)解決方法，可以簡單地刪除點(diǎn)。雖然不是最好的解決方案，但它只用CSS就完成了，并且適用于所有瀏覽器。缺點(diǎn)是您需要將LI中的textnode包裝到另一個(gè)標(biāo)記中(& ltspan >之類的)。在我自己的例子中,& ltol >被用作鏈接列表，所以我可以使用我的& lta >標(biāo)簽！

我使用的CSS:

ol li a {
    float: right;
    margin: 8px 0px 0px -13px; /* collapses <a> and dots */
    padding-left: 10px; /* gives back some space between digit and text beginning */
    position: relative; z-index: 10; /* make the <a> appear ABOVE the dots */
    background-color: #333333; /* same background color as my ol ; the dots are now invisible ! */
}

對(duì)于某些列表，上述解決方案都有缺點(diǎn):多行項(xiàng)目、多位數(shù)項(xiàng)目編號(hào)、自定義背景等。

使用內(nèi)置列表項(xiàng)計(jì)數(shù)器比使用自定義計(jì)數(shù)器更簡潔:

ol.dotless {
  list-style-type: none;
  margin-left: 0;
}
ol.dotless > li:before {
  content: counter(list-item) "\A0";
  float: left;
  text-align: right;
  width: 1.5em;
}

但是這種方法不適用于多行項(xiàng)目。

有一個(gè)新方法允許你直接格式化一個(gè)計(jì)數(shù)器，但是到目前為止，它只在Firefox中有效:

ol.dotless {
  list-style: dotless-item
}
@counter-style dotless-item {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: " ";
}

我遇到的在所有情況下都有效的唯一方法是一個(gè)模擬ol的表:

table.dotlessol {
  margin: 0.25em 1.25em;
  border-spacing: 0;
  counter-reset: dotless;
}
table.dotlessol tr {
  vertical-align: top;
  counter-increment: dotless;
}
table.dotlessol td {
  padding: 0;
}
table.dotlessol td:first-child {
  text-align: right;
  padding-right: 0.5em;
}
table.dotlessol td:first-child::before {
  content: counter(dotless);
}

每行使用兩個(gè)td，將第一個(gè)td留空，并將項(xiàng)目文本放在第二個(gè)TD中。

通過為計(jì)數(shù)器樣式指定一個(gè)空后綴，可以用CSS刪除點(diǎn):

@counter-style empty-style {
  system: extends decimal;
  suffix: ' ';
}

ol {
  list-style: empty-style;
}

您可以使用::marker偽元素進(jìn)一步設(shè)計(jì)數(shù)字的樣式。

注意，Safari(任何版本)或legacy Edge根本不支持這種技術(shù)。但是，幸運(yùn)的是，它在這些瀏覽器中降級(jí)得很好，呈現(xiàn)默認(rèn)點(diǎn)沒有問題。

所以，這是一個(gè)很好的漸進(jìn)增強(qiáng)。

您可以稍后使用jQuery添加這些數(shù)字:

$("ul").each(function() {
   $(this).find("li").each(function(index) {
      $(this)
        .css("list-style-type", "none")
        .prepend("<div class='listnumber'>" + (index + 1) + "</div>");
   })
})

試試這里的樣品。

這里有更多關(guān)于jQuery的信息。

這是最簡單的解決方案，在li中沒有反增量和內(nèi)聯(lián)標(biāo)簽:

ol {list-style-position: inside; overflow: hidden; direction: rtl;}
li {position: relative; left: -15px; text-align: left; letter-spacing: 5px;}

您可以首先移除標(biāo)記并用before元素替換它 以獲得更好的瀏覽器支持，然后使用內(nèi)置的列表項(xiàng)計(jì)數(shù)器

ol {
list-style:none
};
li::before {
content: counter(list-item)
}

1 item 
  2 item 
  3 item

編輯 & lt李& gt應(yīng)該有顯示:列表項(xiàng)；愿望是默認(rèn)的