css-counter | 易学教程

CSS to add leading zero to an ordered list custom counter

阅读更多关于 CSS to add leading zero to an ordered list custom counter

问题 What I have: An ordered list with a custom counter: ol { /*list-style-type:decimal-leading-zero;*/ list-style: none; padding-left: 0px; counter-reset: item; } ol>li { display: table; counter-increment: item; } ol>li:before { display: table-cell; padding: 0 0.5em 0 0; content: counter(item) "."; font-weight: bold; } <ol> <li>List item one.</li> <li>List item two.</li> <li>List item three.</li> <li>List item four.</li> <li>List item five.</li> <li>List item six.</li> <li>List item seven.</li>

CSS counter on hidden submenu

阅读更多关于 CSS counter on hidden submenu

问题 I'm trying to make a dropdown menu using nested <ul> , every <li> displaying a number generated with CSS Counters. Sub-menus are hidden with display:none when not hovered. My problem is that counters are not incremented when an element has display set to none . Do you know a CSS property to prevent this? If I replace display: none by visibility: hidden , it's working but I'm not sure if it's nice to use this for my menu, are there any traps? 回答1: You can mimick the display: none (hidden)

How to store the last counter value in css and display as content in html?

阅读更多关于 How to store the last counter value in css and display as content in html?

问题 For example, my CSS looks like this: .page-number:after { counter-increment: page; } When show as content, for example 6 pages: .page-number:after { content: 'Page ' counter(page) ' of'; } I want to store the last counter -which is 6 - and print it out after each item. Is that possible to do that? ul { list-style: none; counter-reset: page; padding: 0; } .page-number { counter-increment: page; } .page-number:before { content: 'Page ' counter(page) ' of' } <p>I want to use counters to print '6

Using CSS to style a numbered list

阅读更多关于 Using CSS to style a numbered list

问题 I need HTML to produce output similar to: 1. Some title 1.1 blah blah (a) blah blah blah (b) blah blah 1.2 blah blah I believe that because of the need for parenthesis round the letters that I cannot use the ordered list tag for this. Obviously it can be done with a table, but I'd much rather use CSS. However I'm at a loss as to how to do this. If lines wrap to the next line, they should continue under the text like an ordered list would. UPDATE I have tried OL { counter-reset: numeric } OL

Custom numbering for a reversed ordered list

阅读更多关于 Custom numbering for a reversed ordered list

问题 How can I create custom counter styles for a reversed ordered list: C10. Item 10 C9. Item 9 C8. Item 8 C7. Item 7 C6. Item 6 C5. Item 5 C4. Item 4 C3. Item 3 C2. Item 2 C1. Item 1 I found this link which perfectly describes how to achieve a custom numbering in ascending order. How can I modify the following to get a reverse custom numbering and apply it to only a specific listing? <!DOCTYPE html> <html> <style> ol.cp { counter-reset: item; margin-left: 0; padding-left: 0; } ol.cp li { display

More counters in CSS

阅读更多关于 More counters in CSS

问题 I'm having a problem with CSS counters. I set up two counters: one indexes headings and other indexes images . However, only one works correctly, the other one (for images) shows only number 1 in all image descriptions. You can see the example here body { counter-reset: figcounter; counter-reset: head2counter; } .fig:before { counter-increment: figcounter; content: "Fig. " counter(figcounter)": "; font-weight: bold; } .figreset { counter-reset: figcounter; } .head2:before { counter-increment:

How do I stop <div> tags interfering with counters multiple levels of headings?

阅读更多关于 How do I stop tags interfering with counters multiple levels of headings?

问题 This is an expansion of How do I stop <div> tags interfering with counters? The accepted answer solves the problem for one level of headings (ie H1 in the question) but not if there are multiple levels of headings (see below) body { counter-reset: h1 h2 h3 h4; } h1 { counter-reset: h2 h3 h4; } h2 { counter-reset: h3 h4; } h3 { counter-reset: h4; } h1:before { counter-increment: h1; content: counter(h1)" "; } h2:before { counter-increment: h2; content: counter(h1)"." counter(h2)" "; } h3

jQuery automatic heading numbering

阅读更多关于 jQuery automatic heading numbering

问题 I have articles on website with 10-15 H2 tag subtitles. Something likes that. <h1>Name of article</h1> <h2>Subtitle</h2> <p>.....</p> <h2>Subtitle</h2> <p>.....</p> <h2>Subtitle</h2> <p>.....</p> <h2>Subtitle</h2> <p>.....</p> So, question is how to give number for each H2 tag (subtitle) automatically by jQuery in descending order? <h1>Name of article</h1> <h2>15.Subtitle</h2> <p>.....</p> <h2>14.Subtitle</h2> <p>.....</p> <h2>13.Subtitle</h2> <p>.....</p> <h2>12.Subtitle</h2> <p>.....</p> I

Counter-increment with wrapping divs

阅读更多关于 Counter-increment with wrapping divs

问题 I want to use a counter-increment on ordered lists. I want each ol to continue on the previous count. It works when I don't have separate wrapping divs around the ol s. Note that it works for the second ol which is within the same wrapping div, but it stops working for the next two ol s which has a separate wrapping div: http://jsfiddle.net/graphic_dev/Lsn49t16/1/ HTML <div class="wrapper"> <ol class="split start"> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ol> <ol class="split"> <li>Sit<

Counter-increment with wrapping divs

阅读更多关于 Counter-increment with wrapping divs

I want to use a counter-increment on ordered lists. I want each ol to continue on the previous count. It works when I don't have separate wrapping divs around the ol s. Note that it works for the second ol which is within the same wrapping div, but it stops working for the next two ol s which has a separate wrapping div: http://jsfiddle.net/graphic_dev/Lsn49t16/1/ HTML <div class="wrapper"> <ol class="split start"> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ol> <ol class="split"> <li>Sit</li> <li>Amet</li> </ol> </div> <div class="wrapper">  <ol class="split">