สามารถระบุหมายเลขเริ่มต้นสำหรับรายการสั่งซื้อได้หรือไม่?

115

ฉันมีรายการสั่งซื้อที่ฉันต้องการให้หมายเลขเริ่มต้นเป็น 6 ฉันพบว่าสิ่งนี้ได้รับการสนับสนุน (เลิกใช้แล้วในขณะนี้) ใน HTML 4.01 ในข้อกำหนดนี้ระบุว่าคุณสามารถระบุจำนวนเต็มเริ่มต้นได้โดยใช้ CSS (แทนstartแอตทริบิวต์)

คุณจะระบุหมายเลขเริ่มต้นด้วย CSS ได้อย่างไร?

html css html-lists

— vrish88
แหล่งที่มา

148

หากคุณต้องการฟังก์ชันในการเริ่มรายการสั่งซื้อ (OL) ณ จุดใดจุดหนึ่งคุณจะต้องระบุประเภทหลักของคุณเป็น HTML 5 ซึ่งเป็น:

<!doctype html>

ด้วยประเภทหลักดังกล่าวสามารถตั้งค่าstartแอตทริบิวต์ในรายการสั่งซื้อได้ เช่น:

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

ขยายข้อมูลโค้ด

— เทรวิส
แหล่งที่มา

7

ยังถูกต้องหรือไม่

— antony.trupe

3

คำตอบนี้ถูกต้องเมื่อใช้ HTML5 ใช่

— Travis

แอตทริบิวต์ start ยังใช้ได้กับรายการที่ไม่เรียงลำดับ (<ul>) เช่น: <ul style = "list-style-type: lower-roman;" start = "4"> และจะเริ่มรายการใน 'iv' หรือ <ul style = "list-style-type: upper-alpha;" start = "4"> เริ่มวันที่ 'D'

— Matthew Cox

66

<ol start="">ไม่ได้เลิกใช้งานในHTML5อีกต่อไปดังนั้นฉันจะใช้มันต่อไปไม่ว่า HTML4.01 จะพูดอะไรก็ตาม

— Ms2ger
แหล่งที่มา

32

start="number" ห่วยเพราะมันไม่เปลี่ยนโดยอัตโนมัติตามเลขข้างหน้า

วิธีการทำที่อาจตอบสนองความต้องการที่ซับซ้อนมากขึ้นก็คือการใช้และcounter-resetcounter-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;
}

เราจะให้แต่ละ Li แสดงตัวนับ

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
...

— อดัมแกรนท์
แหล่งที่มา

คุณยังสามารถระบุตัวเลขของคุณเองอย่างชัดเจน: stackoverflow.com/a/31823704/320036

— z0r

2

ol li {...}ควรจะเป็นol li:before {...} - มิฉะนั้นนี่เป็นทางออกที่สมบูรณ์แบบขอบคุณ!

— Davor

15

ฉันแปลกใจที่ไม่พบคำตอบในชุดข้อความนี้

ฉันได้พบแหล่งข้อมูลนี้ซึ่งฉันได้สรุปไว้ด้านล่าง:

ในการตั้งค่าแอตทริบิวต์ start สำหรับรายการสั่งซื้อโดยใช้ CSS แทน HTML คุณสามารถใช้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 ด้วย

— hcmcf
แหล่งที่มา

1

คำตอบที่ดี นี่เป็นการช่วยชีวิตขอบคุณ

— Andrea

9

ตามที่คนอื่นแนะนำสามารถใช้startแอตทริบิวต์ของolองค์ประกอบได้

หรืออีกวิธีหนึ่งสามารถใช้valueแอตทริบิวต์ของliองค์ประกอบ แอตทริบิวต์ทั้งสองถูกทำเครื่องหมายว่าเลิกใช้แล้วในHTML 4.01แต่ไม่ใช่ใน HTML 5 ( olและli)

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

ขยายข้อมูลโค้ด

— อันเดรย์
แหล่งที่มา

1

การเริ่มต้นการกำหนดหมายเลขของรายการสั่งซื้อที่หมายเลขที่แตกต่างจากค่าเริ่มต้น ("1") ต้องใช้startแอตทริบิวต์ คุณลักษณะนี้ได้รับอนุญาต (ไม่เลิก) ในสเปค HTML 4.01 (HTML 4.01 ยังไม่ได้เป็น "แทนที่ข้อมูลจำเพาะ" ในเวลาคำถามนี้ถูกโพสต์) และยังคงได้รับอนุญาตในปัจจุบันHTML 5.2 สเปค olองค์ประกอบยังมีตัวเลือกstartแอตทริบิวต์ในXHTML 1.0 ของการเปลี่ยนผ่าน DTDแต่ไม่ได้อยู่ในXHTML 1.0 เข้มงวด DTD (ค้นหาสตริงATTLIST olและตรวจสอบรายชื่อแอตทริบิวต์) ดังนั้นแม้ในสิ่งที่บางส่วนของความคิดเห็นที่มีอายุมากกว่าพูดstartแอตทริบิวต์ไม่ได้เลิก ; ค่อนข้างไม่ถูกต้องใน DTD ที่เข้มงวดของ HTML 4.01 และ XHTML 1.0 แม้ว่าจะมีความคิดเห็นใดอ้างว่า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>

ดังนั้นสิ่งที่คุณควรใช้มีดังต่อไปนี้ (ในบางกรณีที่จำเป็นต้องใช้ค่าที่สูงกว่า 1,000):

<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)

— Tsundoku
แหล่งที่มา

0

ในกรณีที่รายการซ้อนกันจะต้องมีการจัดการออกจากรายการที่ซ้อนกันซึ่งฉันทำได้โดยการตรวจสอบว่า grand parent ไม่ใช่รายการ

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>

ขยายข้อมูลโค้ด

— LoonyNoob
แหล่งที่มา

0

ด้วย CSS มันเป็นเรื่องยากเล็กน้อยที่จะครอบคลุมกรณีที่มีรายการที่ซ้อนกันดังนั้นระดับรายการแรกเท่านั้นที่จะได้รับการกำหนดหมายเลขที่กำหนดเองซึ่งจะไม่เชื่อมต่อกับรายการที่เรียงลำดับใหม่แต่ละรายการ ฉันใช้ CSS combinator '>' เพื่อกำหนดเส้นทางที่เป็นไปได้ไปยังรายการที่จะได้รับหมายเลขที่กำหนดเอง ดู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>

ขยายข้อมูลโค้ด

— LoonyNoob
แหล่งที่มา

-1

เห็นได้ชัดว่าไม่สามารถตั้งค่า @start ของรายการสั่งซื้อ <ol> หรือ @value ของรายการได้ <li> ผ่าน 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>

ขยายข้อมูลโค้ด

— LoonyNoob
แหล่งที่มา