Danh sách có thứ tự (HTML) dưới alpha với dấu ngoặc đơn phải?

Loại danh sách alpha thấp hơn mặc định cho danh sách có thứ tự sử dụng dấu chấm '.'. Có cách nào để sử dụng dấu ngoặc phải thay thế như a) ... b) ..etc không?

Đây là một giải pháp gọn gàng. (Thành thật mà nói, tôi ngạc nhiên với điều này.) CSS có một thứ gọi là bộ đếm , nơi bạn có thể đặt, ví dụ, số chương tự động trên mỗi tiêu đề. Một chút sửa đổi cung cấp cho bạn những điều bên dưới; Bạn sẽ cần tự mình sắp xếp đệm, v.v.

ol {
  counter-reset: list;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

<span>custom list style type (v1):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

Hoạt động trên tất cả các trình duyệt hiện đại và IE9 + (và có thể là IE8 nhưng có thể bị lỗi).

Cập nhật: Tôi đã thêm bộ chọn con để ngăn danh sách lồng nhau chọn kiểu mẹ. trejder cũng tạo ra một điểm tốt trong các nhận xét rằng việc căn chỉnh mục danh sách cũng bị rối tung. Một bài báo trên 456bereastreet có một giải pháp tốt liên quan đến việc xác định vị trí tuyệt đối của quầy.

ol {
    counter-reset: list;
}
ol > li {
    list-style: none;
    position: relative;
}
ol > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

<span>custom list style type (v2):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

Đây là một jsFiddle hiển thị kết quả, bao gồm các danh sách lồng nhau.

dựa trên câu trả lời của DisgruntledGoat, tôi đã mở rộng nó để hỗ trợ danh sách phụ và kiểu khi tôi cần. Chia sẻ nó ở đây trong trường hợp nó giúp đỡ ai đó.

https://jsfiddle.net/0a8992b9/ kết quả đầu ra:

(i)first roman
    (a)first alpha
    (b)second alpha
    (c)third alpha
    (d)fourth alpha
(ii)second roman
(iii)third roman
    (a)first alpha
    (b)second alpha

Thêm điều này vào CSS đã cho một số kết quả thú vị. Nó đã gần, nhưng không có xì gà.

li:before {
    display: inline-block;
    width: 1em; 
    position: relative;
    left: -0.5em; 
    content: ')'
}

----- Đã chỉnh sửa để bao gồm giải pháp từ Iazel, trong phần bình luận -----

Tôi đã hoàn thiện giải pháp của bạn:

li {
    position: relative;
}
li:before {
    display: inline-block;
    width: 7px;
    position: absolute;
    left: -12px;
    content: ')';
    background-color: #FFF;
    text-align: center;
}

Bối cảnh và position: absolutethủ thuật!

Điều này phù hợp với tôi trong IE7, FF3.6, Opera 9.64 và Chrome 6.0.4:

<ol start="a" type="a" style="font-weight: normal;">
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number three;</li> 
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number six;</li>
</ol>

đây là nội tuyến vì nó được mã hóa cho một email, nhưng điểm chính là khoảng cách hoạt động như một khối nội dung và kéo dấu ngoặc vào lãnh thổ bên trái âm để nó thẳng hàng với số danh sách. hai biên lợi nhuận là để bù đắp cho sự khác biệt IE7 và FF

hi vọng điêu nay co ich.