क्या किसी ऑर्डर की गई सूची के लिए शुरुआती संख्या निर्दिष्ट करना संभव है?

114

मेरे पास एक आदेशित सूची है जहां मैं प्रारंभिक संख्या चाहूंगा 6. मुझे पता चला कि यह HTML 4.01 में समर्थित (अब पदावनत) था। इस विनिर्देश में वे कहते हैं कि आप CSS का उपयोग करके शुरुआती पूर्णांक निर्दिष्ट कर सकते हैं। ( startविशेषता के बजाय )

आप सीएसएस के साथ शुरुआती संख्या कैसे निर्दिष्ट करेंगे?

html css html-lists

— vrish88
स्रोत

147

यदि आपको एक विशिष्ट बिंदु पर एक आदेशित सूची (ओएल) शुरू करने के लिए कार्यक्षमता की आवश्यकता है, तो आपको अपना सिद्धांत HTML 5 के रूप में निर्दिष्ट करना होगा; जो है:

<!doctype html>

उस सिद्धांत के साथ, startएक सूचीबद्ध सूची पर एक विशेषता सेट करना मान्य है । जैसे कि:

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

स्निपेट का विस्तार करें

— ट्रैविस
स्रोत

7

क्या यह अभी भी सटीक है?

— antony.trupe

3

यह उत्तर HTML5 का उपयोग करके सटीक है, हाँ।

— ट्रैविस

प्रारंभ विशेषता अनियंत्रित (<ul>) सूचियों के लिए भी काम करती है जैसे: <ul style = "list-style-type: lower-roman;" start = "4"> और 'iv' या <ul style = "सूची-शैली-प्रकार: ऊपरी-अल्फ़ा" पर सूची शुरू करेगा; start = "4"> 'D' पर शुरू

— मैथ्यू कॉक्स

66

<ol start="">एचटीएमएल 5 में अब कोई कमी नहीं है , इसलिए मैं इसका उपयोग करना जारी रखूंगा, भले ही एचटीएमएल 4.01 कहे।

— Ms2ger
स्रोत

32

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"के तीसरे पर सेट कर सकते हैं , लेकिन अब आपको हर बार पहली बार एक आइटम जोड़ने पर इसे बदलने की आवश्यकता होगीliolol

उपाय

सबसे पहले, आइए हमारी वर्तमान संख्या के स्वरूपण को स्पष्ट करें।

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

— एडम ग्रांट
स्रोत

आप अपनी खुद की संख्या भी स्पष्ट रूप से निर्दिष्ट कर सकते हैं: stackoverflow.com/a/31823704/320036

— z0r

2

ol li {...}होना चाहिए ol li:before {...} - अन्यथा यह सही समाधान है, धन्यवाद!

— डावोर

15

मुझे आश्चर्य है कि मैं इस सूत्र में उत्तर खोजने में सक्षम नहीं था।

मुझे यह स्रोत मिला है , जिसे मैंने नीचे संक्षेप में प्रस्तुत किया है:

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 विकी संदर्भ भी देखें

— hcmcf
स्रोत

1

बहुत बढ़िया जवाब। यह एक जीवन रक्षक रहा है, धन्यवाद।

— एंड्रिया

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विशेषता की आवश्यकता होती है । एचटीएमएल 4.01 विनिर्देशन में इस विशेषता की अनुमति नहीं दी गई थी (एचटीएमएल 4.01 इस प्रश्न को उस समय पोस्ट किया गया था, जो अभी तक " सुपरक्ड स्पेशिफिकेशन " नहीं था) और अभी भी वर्तमान HTML 5.2 विनिर्देशन में अनुमत है । olतत्व एक वैकल्पिक था startमें विशेषता XHTML 1.0 संक्रमणकालीन के DTD लेकिन में नहीं XHTML 1.0 के सख्त DTD (स्ट्रिंग के लिए खोज ATTLIST olऔर विशेषता सूची की जाँच करें)। इसलिए कुछ पुरानी टिप्पणियों के बावजूद, startविशेषता को पदावनत नहीं किया गया था ; बल्कि यह अमान्य थाHTML 4.01 और XHTML 1.0 के सख्त DTDs में। टिप्पणियों में से एक का दावा करने के बावजूद, तत्व startपर विशेषता की अनुमति नहीं है ulऔर वर्तमान में फ़ायरफ़ॉक्स और क्रोमियम में काम नहीं करता है।

यह भी ध्यान दें कि एक हजारों विभाजक काम नहीं करता है (फ़ायरफ़ॉक्स और क्रोमियम के वर्तमान संस्करणों में)। निम्नलिखित कोड स्निपेट में, के 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>

कुछ अन्य उत्तर सीएसएस संपत्ति का उपयोग करने का सुझाव देते हैं counter, लेकिन यह सामग्री और लेआउट के पारंपरिक पृथक्करण (क्रमशः HTML और सीएसएस में) को चलाता है। कुछ दृश्य दोष वाले उपयोगकर्ता अपनी स्वयं की स्टाइल शीट का उपयोग कर सकते हैं, और counterपरिणामस्वरूप परिणाम खो सकते हैं। स्क्रीन रीडर समर्थन के लिए counterभी परीक्षण किया जाना चाहिए। CSS में कंटेंट के लिए स्क्रीन रीडर सपोर्ट एक अपेक्षाकृत हालिया फीचर है और व्यवहार अनिवार्य रूप से संगत नहीं है। स्क्रीन रीडर और सीएसएस देखें : क्या हम शैली से बाहर जा रहे हैं (और सामग्री में)? WebAIM ब्लॉग पर जॉन नॉर्थअप द्वारा (अगस्त 2017)।

— Tsundoku
स्रोत

0

यदि सूची में नेस्टेड हैं, तो नेस्टेड सूची आइटम को छोड़ने के लिए एक हैंडलिंग होनी चाहिए, जिसे मैंने यह सत्यापित करके पूरा किया है कि भव्य माता-पिता सूची आइटम नहीं हैं।

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

सीएसएस के साथ यह मामला कवर करने के लिए थोड़ा मुश्किल है कि नेस्टेड सूची आइटम हैं, इस प्रकार केवल पहली सूची के स्तर को कस्टम क्रमांक मिलता है जो प्रत्येक नई ऑर्डर की गई सूची के साथ हस्तक्षेप नहीं करता है। मैं कस्टम कॉम्बिनेटर '>' का उपयोग सूची पथों के लिए संभावित रास्तों को परिभाषित करने के लिए कर रहा हूँ जिन्हें एक कस्टम नंबरिंग मिलेगी। 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

स्पष्ट रूप से न तो @ एक ऑर्डर की गई सूची का @ प्रारंभ <ol> और न ही एक सूची आइटम का @ <li> सीएसएस के माध्यम से सेट किया जा सकता है। Https://www.w3schools.com/css/css_list.asp देखें

सीएसएस में एक काउंटर द्वारा नंबरिंग को बदलना सबसे अच्छा / सबसे तेज़ / मूर्खतापूर्ण समाधान लगता है और अन्य लोग इसे बढ़ावा दे रहे हैं, जैसे https://css-tricks.com/numbering-in-style/

शुद्ध जावास्क्रिप्ट के साथ प्रत्येक सूची आइटम का @ सेट करना संभव है, लेकिन यह सीएसएस की तुलना में धीमा है। यह जांचने की भी आवश्यकता नहीं है कि क्या सूची आइटम एक ऑर्डर की गई सूची <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
स्रोत