मैं चाहता हूं कि एक साधारण HTML वेब पेज में शीर्षकों को क्रमबद्ध रूप से क्रमांकित किया जाए। मेरे पास इस प्रकार है:

body {
  counter-reset: h1counter;
}

h1:before {
  content: counter(h1counter) ".\0000a0\0000a0";
  counter-increment: h1counter;
  counter-reset: h2counter;
}

h2:before {
  content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0";
  counter-increment: h2counter;
}
<h1>Section 1</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 2</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 3</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>

लेकिन यह इस प्रकार प्रदर्शित करता है:

1.  Section 1
1.1.  Subsection 1
1.1.  Subsection 2
2.  Section 2
2.1.  Subsection 1
2.1.  Subsection 2
Section 3
3.1.  Subsection 1
3.1.  Subsection 2

जाहिर है, उपखंड 2 <h2> शीर्षकों का दूसरा नंबरिंग अंक 2 होना चाहिए, लेकिन यह बढ़ता नहीं है (जैसे कि counter-increment: h2counter; निष्पादित नहीं किया गया था), जैसे यह करता है <h1> शीर्षकों के लिए।

मुझसे क्या छूट गया?

2
mrgou 26 जिंदा 2022, 20:21
क्या उदाहरण में "धारा 3" "3. खंड 3" के लिए एक टाइपो प्रदर्शित करता है, या आप प्रारंभिक "3." नहीं देख रहे हैं?
 – 
Andrew Morton
26 जिंदा 2022, 20:31

3 जवाब

सबसे बढ़िया उत्तर

कुछ समय पहले तक मुझे सीएसएस काउंटर "स्कोपिंग" कार्यान्वयन की एक ही गलतफहमी थी और इसी तरह के मुद्दों में भाग गया। परामर्श विनिर्देशों के बाद यह पता चला कि कार्यान्वयन, प्रभाव में काफी सहज ज्ञान युक्त, ज्यादातर विनिर्देशों से मेल नहीं खाते: काउंटरों के लिए कोई "वैश्विक" दायरा नहीं है।

इसलिए काउंटर का दायरा दस्तावेज़ में पहले तत्व से शुरू होता है जो उस काउंटर को तुरंत चालू करता है और इसमें तत्व के वंशज और उसके वंशजों के साथ उसके बाद के भाई-बहन शामिल होते हैं। हालांकि, इसमें काउंटर के दायरे में किसी भी तत्व को शामिल नहीं किया गया है, जो कि बाद के भाई-बहन पर काउंटर-रीसेट द्वारा बनाए गए समान नाम के साथ, इस तरह के स्पष्ट काउंटर इंस्टेंटेशन को उन पहले के भाई-बहनों को अस्पष्ट करने की इजाजत देता है।

-- (संग्रहीत) CSS सूचियाँ और काउंटर मॉड्यूल स्तर 3: 4.3। नेस्टेड काउंटर और दायरा

वास्तव में counter-reset वर्तमान में जो कुछ भी करता है उसके लिए थोड़ा भ्रामक नाम है: यह वास्तव में दिए गए तत्व और उसके अगले भाई-बहनों के DOM दायरे को संलग्न करने में दिए गए नाम के काउंटर को आरंभ करता है। इसे छद्म तत्व के लिए सेट करने से मेजबान तत्व केवल पर अलग दायरा बनता है:

h1::before { counter-reset: x; }`

सभी h1 वंशजों के लिए x काउंटर बनाता है, जो प्रभावी रूप से . के समान है

h1 > *:only-child { counter-reset: x; }`

तो आपके प्रश्न का उत्तर तार्किक रूप से है: काउंटर रीसेट को छद्म तत्व से बाहर ले जाएं। यदि आप निहित दायरे के साथ ठीक हैं (तत्व के सबसे करीब और उसके भाई-बहनों पर फैला हुआ है), तो आपको स्पष्ट रीसेट की भी आवश्यकता नहीं है।

h1 {
  counter-increment: h1counter;
  counter-reset: h2counter;
}
h1::before {
  content: counter(h1counter) ".\0000a0\0000a0";
}
h2::before {
  counter-increment: h2counter;
  content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0";
}
<h1>Section 1</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 2</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 3</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>

मैं इस विषय के लिए कुछ खोजपूर्ण खेल का मैदान रखूँगा। मैं स्वीकार करता हूं कि अब भी मैं सभी बारीकियों के बारे में वास्तव में आश्वस्त नहीं हूं। और ध्यान दें कि इम्प्लांटेशन में अभी भी अंतर हैं: फ़ायरफ़ॉक्स वर्तमान में क्रोम की तुलना में चश्मे के करीब लगता है।

<button aria-pressed="false">
 reset-on-body
 <style media="none">
  body { counter-reset: list-item; }
 </style>
</button>

<div> 
 <button aria-pressed="false">
  reset on div:
  <style media="none">
   div { counter-reset: list-item 11; }
  </style>
 </button>
 <p>
  <button aria-pressed="false">
   reset to 11:
   <style media="none">
    div > p { counter-reset: list-item 11; }
   </style>
  </button>
  <button aria-pressed="false">
   set to 12:
   <style media="none">
    div > p { counter-set: list-item 12; }
   </style>
  </button>
 </p>
</div>

<p>P before OL</p>

<ol>
 <li>
  <button aria-pressed="false">
   Disable native ol reset:
   <style media="none">
    ol { counter-reset: none; }
   </style>
  </button> OL
 <li>bar
  <ol>
   <li>baz
   <li>gazonk
   </ol>
 <li>qux
</ol>

<p>P next to OL</p>

<script>
[...document.querySelectorAll('button')].forEach(b=>{
 var a = 'aria-pressed'
 b.onclick = function() {
  var to = this.getAttribute(a) !== 'true';
  this.setAttribute(a,String(to));
  this.firstElementChild.setAttribute('media',to?'all':'none')
 }
})
</script>

<style>
:root { background: dimgray; color: snow; }
:link { color: aqua; } :visited { color: lime; }

body, div, p, ol {
 padding: .2em 2em; 
 outline: 1px dashed;
}

p::after {
 content: ' // list-item: ' counter(list-item);
 display: block;
}

style[media] {
 display: block; font-family: monospace;
 margin-bottom: .3em;
}

[aria-pressed="false"]::before { content: '☐ ' }
[aria-pressed="true"]::before { content: '☒ ' }
[aria-pressed="true"] { outline: solid; }

::marker, p::after { outline: solid; }
</style>
0
myf 27 जिंदा 2022, 01:00
स्पष्टीकरण के साथ समाधान साझा करने के लिए धन्यवाद, यह बहुत मददगार है!
 – 
mrgou
27 जिंदा 2022, 12:54

आपको "h2counter रीसेट" लाइन को एक ही h1 चयनकर्ता में ले जाना चाहिए। शैली के लिए अंतिम परिणाम इस तरह होना चाहिए:

body {
    counter-reset: h1counter;
}
h1 {
    counter-reset: h2counter;
}
h1:before {
    content: counter(h1counter) ".\0000a0\0000a0";
    counter-increment: h1counter;
}
h2:before {
    content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0";
    counter-increment: h2counter;
}
<h1>Section 1</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 2</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 3</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
6
Amila Senadheera 26 जिंदा 2022, 20:34

एचटीएमएल

<h1>Section 1</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 2</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 3</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>

सीएसएस

body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
    font-weight:bold;
}
h2:before 
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}

बेला:

0
niku 26 जिंदा 2022, 20:44