답변:
특정 지점에서 OL (Ordered List)을 시작하는 기능이 필요하면 doctype을 HTML 5로 지정해야합니다. 즉 :
<!doctype html>해당 doctype start을 사용하면 정렬 된 목록에 속성 을 설정하는 것이 유효 합니다. 예 :
<ol start="6">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>start="number" 이전의 번호 매기기에 따라 자동으로 변경되지 않기 때문에 짜증납니다.
더 복잡한 요구에 맞게 수이 작업을 수행하는 또 다른 방법은 사용하는 것입니다 counter-reset및 counter-increment.
문제
다음과 같은 것을 원한다고 가정하십시오.
1. Item one
2. Item two
Interruption from a <p> tag
3. Item three
4. Item four두 start="3"번째 li의 세 번째 에 설정할 수 ol있지만 이제 첫 번째 항목에 항목을 추가 할 때마다 변경해야합니다.ol
해결책
먼저 현재 번호 매기기의 서식을 지 웁니다.
ol {
list-style: none;
}우리는 각각의 리가 카운터를 보여줄 것입니다
ol li:before {
counter-increment: mycounter;
content: counter(mycounter) ". ";
}이제 카운터 ol가 각각이 아닌 첫 번째에만 재설정되도록해야합니다 .
ol:first-of-type {
counter-reset: mycounter;
}데모
http://codepen.io/ajkochanowicz/pen/mJeNwY
이제 목록에 항목을 추가 할 수 있으며 번호 매기기가 유지됩니다.
1. Item one
2. Item two
...
n. Item n
Interruption from a <p> tag
n+1. Item n+1
n+2. Item n+2
...ol li {...}해야한다 ol li:before {...} - 그렇지 않으면이 완벽한 솔루션입니다, 감사합니다!
이 스레드에서 답을 찾을 수 없다는 것에 놀랐습니다.
이 소스를 찾았 으며 아래에 요약했습니다.
HTML 대신 CSS를 사용하여 정렬 된 목록의 시작 속성을 설정하려면 counter-increment다음과 같이 속성을 사용할 수 있습니다 .
ol {
list-style: none;
counter-increment: start 3;
}
li:before {
content: counter(start, lower-alpha) ") ";
counter-increment: start;
}counter-increment인덱스가 0 인 것 같으므로 4부터 시작하는 목록을 얻으려면 3.
다음 HTML의 경우
<ol>
<li>Buy milk</li>
<li>Feed the dog</li>
<li>Drink coffee</li>
</ol>내 결과는
d) Buy milk
e) Feed the dog
f) Drink coffee내 바이올린 좀 봐
W3 wiki 참조 도 참조하세요.
기본값 ( "1")과 다른 번호에서 정렬 된 목록의 번호 매기기를 시작하려면 start속성이 필요 합니다. 이 속성은 HTML 4.01 사양 (이 질문이 게시 된 시점에 HTML 4.01이 아직 "대체 사양"이 아님 )에서 허용되었으며 (사용되지 않음) 현재 HTML 5.2 사양 에서 여전히 허용됩니다 . ol요소는 선택 사항이 있었다 start의 속성 XHTML 1.0의 전환 DTD를 하지만에 XHTML 1.0의 엄격한 DTD (문자열을 검색 ATTLIST ol하여 속성 목록을 확인). 따라서 일부 이전 주석의 내용에도 불구하고이 start속성은 더 이상 사용 되지 않습니다 . 오히려 그것은 유효 하지 않았다HTML 4.01 및 XHTML 1.0의 엄격한 DTD에서. 댓글 중 하나가 주장하는 내용에도 불구하고 start속성은 ul요소에서 허용 되지 않으며 현재 Firefox 및 Chromium에서 작동하지 않습니다.
천 단위 구분 기호는 작동하지 않습니다 (현재 버전의 Firefox 및 Chromium에서). 다음 코드 스 니펫에서는 10.000로 해석됩니다 10. 에도 동일하게 적용됩니다 10,000. 따라서 다음 유형의 counter값을 사용하지 마십시오 .
<ol start="10.000">
<li>Item 10.000</li>
<li>Next item</li>
<li>Next item</li>
</ol>따라서 사용해야하는 것은 다음과 같습니다 (드물게 1000보다 큰 값이 필요한 경우).
<ol start="10000">
<li>Item 10.000</li>
<li>Next item</li>
<li>Next item</li>
</ol>다른 답변 중 일부는 CSS 속성 사용을 제안 counter하지만 이는 기존의 콘텐츠 및 레이아웃 분리 (각각 HTML 및 CSS)에 반대합니다. 특정 시각 장애가있는 사용자는 자신의 스타일 시트를 사용할 수 있으며 그 counter결과 값이 손실 될 수 있습니다. 에 대한 스크린 리더 지원 counter도 테스트해야합니다. CSS의 콘텐츠에 대한 스크린 리더 지원은 비교적 최근의 기능이며 동작이 반드시 일관된 것은 아닙니다. 보기 화면 판독기와 CSS를 : 우리는 (콘텐츠 및로) 스타일의 외출? WebAIM 블로그의 John Northup (2017 년 8 월).
목록이 중첩 된 경우 중첩 된 목록 항목을 제외하는 처리가 있어야합니다.이 작업은 상위 상위 항목이 목록 항목이 아닌지 확인하여 수행했습니다.
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>CSS를 사용하면 중첩 된 목록 항목이있는 경우를 처리하는 것이 약간 까다 롭습니다. 따라서 첫 번째 목록 수준 만 새로운 순서가 지정된 각 목록과 충돌하지 않는 사용자 지정 번호 지정을받습니다. CSS 결합 자 '>'를 사용하여 사용자 지정 번호 매기기를받을 목록 항목에 대한 가능한 경로를 정의하고 있습니다. 참조 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>분명히 정렬 된 목록의 @start <ol> 또는 목록 항목 <li>의 @value는 CSS를 통해 설정할 수 없습니다. 참조 https://www.w3schools.com/css/css_list.asp를
CSS에서 카운터로 번호 매기기를 바꾸는 것이 가장 좋고 / 가장 빠르며 / 완벽한 해결책 인 것처럼 보이며이를 홍보하는 다른 사람들도 있습니다. 예 : https://css-tricks.com/numbering-in-style/
순수 JavaScript를 사용하면 각 목록 항목의 @value를 설정할 수 있지만 이것은 물론 CSS보다 느립니다. 정렬되지 않은 목록은 자동으로 제외되므로 목록 항목이 정렬 된 목록 <ol>에 속하는지 확인할 필요조차 없습니다.
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>