Có thể chỉ định một số bắt đầu cho một danh sách có thứ tự không?

115

Tôi có một danh sách có thứ tự trong đó tôi muốn số ban đầu là 6. Tôi thấy rằng điều này đã được hỗ trợ (hiện không được dùng nữa) trong HTML 4.01. Trong đặc tả này, họ nói rằng bạn có thể chỉ định số nguyên bắt đầu bằng cách sử dụng CSS. (thay vì startthuộc tính)

Bạn sẽ chỉ định số bắt đầu bằng CSS như thế nào?

html css html-lists

— vrish88
nguồn

148

Nếu bạn cần chức năng để bắt đầu danh sách có thứ tự (CV) tại một điểm cụ thể, bạn sẽ phải chỉ định loại tài liệu của mình là HTML 5; đó là:

<!doctype html>

Với loại tài liệu đó, việc đặt một startthuộc tính trên danh sách có thứ tự là hợp lệ . Nhu la:

<ol start="6">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>

Mở rộng đoạn mã

— Travis
nguồn

7

điều này vẫn còn chính xác?

— antony.trupe

3

Câu trả lời này là chính xác khi sử dụng HTML5, có.

— Travis

Thuộc tính start cũng hoạt động với các danh sách không có thứ tự (<ul>) như: <ul style = "list-style-type: Lower-roman;" start = "4"> và sẽ bắt đầu danh sách trên 'iv' hoặc <ul style = "list-style-type: upper-alpha;" start = "4"> bắt đầu vào 'D'

— Matthew Cox

66

<ol start="">không còn bị phản đối trong HTML5 nữa , vì vậy tôi sẽ tiếp tục sử dụng nó, bất kể HTML4.01 nói gì.

— Ms2ger
nguồn

32

start="number" tệ vì nó không tự động thay đổi dựa trên việc đánh số trước nó.

Một cách khác để làm điều này có thể phù hợp với các nhu cầu phức tạp hơn là sử dụng counter-resetvàcounter-increment .

Vấn đề

Giả sử bạn muốn một cái gì đó như thế này:

1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four

Bạn có thể đặt start="3"vào ngày thứ ba licủa giây ol, nhưng bây giờ bạn sẽ cần phải thay đổi nó mỗi khi bạn thêm một mục vào mục đầu tiênol

Giải pháp

Đầu tiên, hãy xóa định dạng của số hiện tại của chúng tôi.

ol {
  list-style: none;
}

Chúng tôi sẽ có từng li cho quầy

ol li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}

Bây giờ chúng ta chỉ cần đảm bảo rằng bộ đếm chỉ đặt lại trên cái đầu tiên olthay vì mỗi cái.

ol:first-of-type {
  counter-reset: mycounter;
}

Bản giới thiệu

http://codepen.io/ajkochanowicz/pen/mJeNwY

Bây giờ tôi có thể thêm nhiều mục vào một trong hai danh sách và việc đánh số sẽ được giữ nguyên.

1. Item one
2. Item two
...
n. Item n

Interruption from a <p> tag

n+1. Item n+1
n+2. Item n+2
...

— Adam Grant
nguồn

Bạn cũng có thể chỉ định rõ ràng các số của riêng mình: stackoverflow.com/a/31823704/320036

— z0r

2

ol li {...}nên được ol li:before {...} - nếu không thì đây là giải pháp hoàn hảo, cảm ơn bạn!

— Davor

15

Tôi ngạc nhiên rằng tôi không thể tìm thấy câu trả lời trong chủ đề này.

Tôi đã tìm thấy nguồn này , mà tôi đã tóm tắt bên dưới:

Để đặt thuộc tính bắt đầu cho danh sách có thứ tự bằng cách sử dụng CSS thay vì HTML, bạn có thể sử dụng thuộc counter-incrementtính như sau:

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

counter-incrementdường như được lập chỉ mục 0, vì vậy để có được danh sách bắt đầu từ 4, hãy sử dụng 3.

Đối với HTML sau

<ol>
  <li>Buy milk</li>
  <li>Feed the dog</li>
  <li>Drink coffee</li>
</ol>

Kết quả của tôi là

d) Buy milk
e) Feed the dog
f) Drink coffee

Kiểm tra trò chơi của tôi

Xem thêm tài liệu tham khảo wiki W3

— hcmcf
nguồn

1

Câu trả lời chính xác. Đây là một cứu cánh, cảm ơn bạn.

— Andrea

9

Như những người khác đề xuất, người ta có thể sử dụng startthuộc tính của olphần tử.

Ngoài ra, người ta có thể sử dụng valuethuộc tính của liphần tử. Cả hai thuộc tính đều được đánh dấu là không dùng nữa trong HTML 4.01 , nhưng không được dùng trong HTML 5 ( olvà li).

<ol start="-2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="10">Gamma</li>
  <li>Delta</li>
</ol>

Mở rộng đoạn mã

— Andrey
nguồn

1

Bắt đầu đánh số danh sách có thứ tự ở một số khác với giá trị mặc định ("1") yêu cầu startthuộc tính. Thuộc tính này được cho phép (không bị phản đối) trong thông số kỹ thuật HTML 4.01 (HTML 4.01 chưa phải là "Đặc điểm kỹ thuật thay thế" tại thời điểm câu hỏi này được đăng) và vẫn được phép sử dụng trong thông số kỹ thuật HTML 5.2 hiện tại . Phần oltử cũng có startthuộc tính tùy chọn trong DTD chuyển tiếp của XHTML 1.0 nhưng không có trong DTD nghiêm ngặt của XHTML 1.0 (tìm kiếm chuỗi ATTLIST olvà kiểm tra danh sách thuộc tính). Vì vậy, bất chấp những gì một số nhận xét cũ nói, startthuộc tính này không bị phản đối ; đúng hơn nó là không hợp lệtrong các DTD nghiêm ngặt của HTML 4.01 và XHTML 1.0. Bất chấp những gì một trong các nhận xét tuyên bố, startthuộc tính không được phép trênul phần tử và hiện không hoạt động trong Firefox và Chromium.

Cũng lưu ý rằng dấu phân tách hàng nghìn không hoạt động (trong các phiên bản Firefox và Chromium hiện tại). Trong đoạn mã sau, 10.000sẽ được hiểu là 10; điều tương tự cũng áp dụng cho 10,000. Vì vậy, không sử dụng loại countergiá trị sau:

<ol start="10.000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

Vì vậy, những gì bạn nên sử dụng là như sau (trong một số trường hợp hiếm hoi yêu cầu các giá trị cao hơn 1000):

<ol start="10000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

Một số câu trả lời khác đề xuất sử dụng thuộc tính CSS counter, nhưng điều này chống lại sự phân tách truyền thống giữa nội dung và bố cục (trong HTML và CSS, tương ứng). Người dùng bị khiếm thị nhất định có thể sử dụng biểu định kiểu của riêng họ và counterkết quả là các giá trị có thể bị mất. Hỗ trợ trình đọc màn hình cho countercũng nên được thử nghiệm. Hỗ trợ trình đọc màn hình cho nội dung trong CSS là một tính năng tương đối gần đây và hành vi không nhất thiết phải nhất quán. Xem Trình đọc màn hình và CSS: Chúng ta có đang lạc lõng (và đi vào nội dung) không? của John Northup trên blog WebAIM (tháng 8 năm 2017).

— Tsundoku
nguồn

0

Trong trường hợp các danh sách được lồng vào nhau, phải có cách xử lý để loại bỏ các mục danh sách lồng nhau, mà tôi đã hoàn thành bằng cách xác minh rằng cha mẹ không phải là một mục danh sách.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
var cnt = 0;
for (var i=0;i<list.length;i++){
  if (list[i].parentElement.parentElement.nodeName!="LI") {
    cnt += 1;
    list[i].setAttribute("value",cnt);
  }
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

Mở rộng đoạn mã

— LoonyNoob
nguồn

0

Với CSS, sẽ hơi phức tạp khi đề cập đến trường hợp có các mục danh sách lồng nhau, do đó chỉ cấp danh sách đầu tiên nhận được đánh số tùy chỉnh không xen kẽ với mỗi danh sách có thứ tự mới. Tôi đang sử dụng tổ hợp CSS '>' để xác định các đường dẫn có thể đến các mục danh sách sẽ nhận được đánh số tùy chỉnh. Xem https://www.w3schools.com/css/css_combinators.asp

body {
  counter-reset: li_cnt;
}
/* discard auto generated numbers */
ol {
  list-style-type: none;
}
/* all possible paths to the list item that shall have custom numbering */
section#TheContent > ol > li:before,
body > ol > li:before {
  counter-increment: li_cnt;
  content: counter(li_cnt)'. '; /* add own numbers */
}
/* switch on default auto generated numbers for nested list items */
li > ol {
  list-style-type: decimal;
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

Mở rộng đoạn mã

— LoonyNoob
nguồn

-1

Rõ ràng là không thể đặt @start của danh sách có thứ tự <ol> hoặc @value của mục danh sách <li> qua CSS. Xem https://www.w3schools.com/css/css_list.asp

Thay thế việc đánh số bằng bộ đếm trong CSS có vẻ là giải pháp tốt nhất / nhanh nhất / dễ hiểu và có những người khác đang quảng cáo nó, ví dụ: https://css-tricks.com/numbering-in-style/

Với JavaScript thuần túy, có thể đặt @value của mỗi mục danh sách, nhưng điều này tất nhiên chậm hơn so với CSS. Thậm chí không cần phải kiểm tra xem mục danh sách có thuộc danh sách có thứ tự <ol> hay không, vì các danh sách không có thứ tự sẽ tự động bị loại ra.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
for (var i=0; i<list.length; i++){
  if (list[i].parentElement.nodeName=="OL") {
    list[i].setAttribute("value",i+1);
  }
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
  <h2>Ordered Lists - numbering not interupted</h2>
  <p>This example avoid that each ordered list starts with 1:</p>

  <p><strong>1st list:</strong></p>
  <ol>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
  </ol>

  <p><strong>2nd list:</strong></p>
  <ol>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
  </ol>
  </section>

</body>
</html>

Mở rộng đoạn mã

— LoonyNoob
nguồn