css-counter | 易学教程

How do CSS counters work?

阅读更多关于 How do CSS counters work?

问题 <!DOCTYPE html> <html> <head> <style> body { counter-reset: ele; } *::after { counter-increment: ele; content: "element count " counter(ele); } </style> </head> <body> <h1> h1 </h1> <h2> h2 </h2> <h2> h2 </h2> <h2> h2 </h2> <p><b> b </b> p</p> <br/> <br/> <br/> <br/> <br/> <br/> </body> </html> In the above snippet: It looks like all the <br/> tags getting ignored by CSS counters. The reason is? In the above snippet, what are elements 7 and 8 representing? 回答1: Explanation of the problem(s)

Counter Increment is not starting properly

阅读更多关于 Counter Increment is not starting properly

问题 I'm having the below issue that my counter increment are not working properly. h4.heading_numberlist { margin-top: 12.0pt; margin-right: 0in; margin-bottom: 3.0pt; margin-left: 0in; page-break-after: avoid; font-size: 12.0pt; font-family: "Arial", sans-serif; color: black; font-weight: bold; } h4.heading_numberlist::before { content: counter(list-number, upper-alpha) '. '; } .topic { counter-increment: list-number; } <div class="topic nested3"> <h4 class="heading_normal">Care</h4> </div> <div

How to combine numbers and letters in ordered list?

阅读更多关于 How to combine numbers and letters in ordered list?

来源： https://stackoverflow.com/questions/47410573/how-to-combine-numbers-and-letters-in-ordered-list

Insert CSS parent section counter for nested lists

阅读更多关于 Insert CSS parent section counter for nested lists

问题 I have a 2 level ul . I am using counter-reset , counter-increment , and content to insert a running counter. It works in that the content in the li s is numbering correctly. I have and a link in the first level li , after its nested ul that I want to say "Add To Rule [number of parent li]". Below is a minimum working example of what I am doing. In the a link, it is using the counter for the 2nd level ul / li . What it outputs: Rule 1 Rule 1.1 ... Rule 1.2 ... Rule 1.3 ... Add To Rule 1.3

Is there any way to insert an element's index (child number) as text within the element solely using CSS?

阅读更多关于 Is there any way to insert an element's index (child number) as text within the element solely using CSS?

问题 My objective is to print a text file line by line and append the line number at the beginning. Like so: <div id="wrapper"> <div class="line">1: asdf</div> <div class="line">2: asdfasdf</div> <div class="line">3: asdfasdfasdfasdf</div> <div class="line">4: asdf</div> </div> n is a variable in CSS responsible for an element's index within its parent and within a child selector you can perform operations on it, eg. nth-child(2n + 3 ) Is there any way to grab this variable and insert it as plain

Style subitems in ordered list numbers with CSS

阅读更多关于 Style subitems in ordered list numbers with CSS

问题 I will use an other design for an ordered list. So I found a nice solution here on SO. body { counter-reset: item; } ol.numbered_style li:before { counter-increment:item; margin-bottom:5px; margin-right:10px; content:counter(item); background:gold; border-radius:100%; color:white; width:1.2em; text-align:center; display:inline-block; } ol.none, ul.none,ol.numbered_style { list-style: none; } <ol class="numbered_style"> <li>First</li> <li>Second</li> <li>Third <ol class="none"> <li>Subitem</li

How to place a css counter-increment below a paragraph of text?

阅读更多关于 How to place a css counter-increment below a paragraph of text?

问题 The attached fiddle places a counter-increment next to each paragraph. Is it possible, within each paragraph of text, <p> , to include the counter-increment element below each paragraph, aligned on the right side? I have also created a Fiddle If an updated fiddle could please be provided, it would be extremely helpful, as I am still new to coding. HTML: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim vitae dolor luctus gravida. Vestibulum elementum eget augue eu

Change z-index with counter-increment

阅读更多关于 Change z-index with counter-increment

问题 I try to make an image slider which will show a picture when a mouse hovers over a dot. I tried too switch between images by using z-index but nothing moved. .slider { counter-reset: index 1000; } .slider input[name='slide_switch']:hover+label+img { counter-increment: index; z-index: counter(index); } 回答1: The way you were trying to use counter wasn't going to work even if you used JavaScript/jQuery. The counter properties are used to number elements like an ordered list it has nothing to do

Strange browser behavior with counter identifier “list-item”

阅读更多关于 Strange browser behavior with counter identifier “list-item”

问题 TL;DR Don’t name your counter list-item Issue: CSS counters are comparatively easy to understand, well documented and have good browser support. However, I encountered unexpected behaviors with them that I do not understand and where I would like to know why this occurs. Probably just bugs in the browsers … In the following example we can see that counters work as expected: ol { list-style-type: none; counter-reset: list-counter; } ol>li { counter-increment: list-counter; } ol>li:before {

css counter-increment unwanted reset when skipping :before

阅读更多关于 css counter-increment unwanted reset when skipping :before

问题 Im having a problem with my counter that im using to get numbers before h3, h4 and h5, like a list. The number should only be visible if the tag has class="count", and its only then it should counter-reset for the header below. When i skip showing the number on a h3 the h4s counter gets messed upp, and same for skipping h4. Does anyone have any idea why? body { counter-reset: h3 } h3 { counter-reset: h4 } h4 { counter-reset: h5 } h3.count:before { counter-increment: h3; content: counter(h3) "