回答:
特定の時点で順序付きリスト(OL)を開始する機能が必要な場合は、doctypeをHTML 5として指定する必要があります。それは:
<!doctype html>
そのdoctypeではstart
、順序付きリストに属性を設定することが有効です。といった:
<ol start="6">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>
start="number"
それはその前の番号付けに基づいて自動的に変更されないので、吸います。
これを行うもう1つの方法は、より複雑なニーズに適合する可能性があり、counter-reset
およびを使用することcounter-increment
です。
問題
次のようなものが必要だとします。
1. Item one
2. Item two
Interruption from a <p> tag
3. Item three
4. Item four
2 start="3"
番目の3番目li
に設定することもできol
ますが、最初のアイテムにアイテムを追加するたびに変更する必要があります。ol
解決
まず、現在の番号付けの書式をクリアしましょう。
ol {
list-style: none;
}
私たちはそれぞれの李にカウンターを見せます
ol li:before {
counter-increment: mycounter;
content: counter(mycounter) ". ";
}
ここで、カウンターがリセットされるのは、1 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
要素には、XHTML 1.0の移行DTDではオプションのstart
属性もありましたが、XHTML 1.0の厳密なDTDではありません(文字列を検索して属性リストを確認します)。したがって、古いコメントのいくつかが言っているにもかかわらず、属性は廃止されませんでした。むしろそれは無効でしたATTLIST ol
start
HTML 4.01とXHTML 1.0の厳密なDTDで。コメントの1つが主張しているにもかかわらず、このstart
属性はul
要素で許可されておらず、現在FirefoxおよびChromiumでは機能しません。
(現在のバージョンのFirefoxおよびChromiumでは)3桁ごとの区切り文字が機能しないことにも注意してください。次のコードスニペットで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を参照してください。John NorthupによるWebAIMブログ(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>
明らかに、順序付けられたリスト<ol>の@startもリストアイテム<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>