[CSS Counter counter] CSS counter counter (serial number character Auto Increment) application problem explanation and example demonstration

Last Update:2016-07-06 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

It's not shameful to dig a Grave.CSS counter is nothing new, as early as 10 spring, I wrote the "CSS content generation technology and application" article will be mentioned (see), but at that time as one of the Members Introduced. Just like the routine of new colleagues, although the black as Coke in the self-introduction to the new colleagues left a deep impression, but because the introduction of the vast number of colleagues, I am only one of Them. naturally, after a month, I will be mercilessly forgotten, except for the faint face, because after all, it is more abstract. however, the bucket volume of the CSS counter is clearly not a short description of what can be revealed, called Vain. Like me, maybe some year, the new colleague who was slipped like a donkey finally had his head caught in the door, remembered my voice, and asked me to seek help!I've been in this situation lately.To the department colleagues to do some juice system, because the juice shop often have fruit because of fruits by n more beautiful sister phase and out of stock, therefore, each person can choose three kinds of freely collocation drinks. so, there is the 1th choice, 2nd choice, 3rd choice ... Originally I was written in plain text in the Label. Good heavy good tired, feeling will not love again! At this time, suddenly a white light, lunch time is over, aunt opened the office Lights. This Huangrugeshi flash reminds me of the "css counter" of Daming Lake. Think that year, mobile Web or Robin hood, ie six or seven stir up trouble. This seductive skill, even if announcing, is subject to the halved of compatibility with the big World.But now it's not the same, we caught up with a better time: English teacher engaged in the traditional industrial production hammer, movie stars to take the collective to the prison to shoot large films; before those who were subject to ie6/ie7 incompatible and the darkness of the high-level Css/js features have come to the front, CSS counter is one of Them. so, I picked up my usual fishing to dig earthworms small shovel to dig the CSS counter Grave. Although there are some articles on the web that introduce CSS counters, but most of them are not comprehensive enough, the case is not good enough, check also Inconvenient. It is like renting a house, although can also wind and rain, but decorate style is not own, still jirenlixia, guarantee forbid landlord borrow an east wind to away. so, it's necessary to final touches yourself, dig a grave and build a House.It is not shameful to dig graves for the pure technical Circle. We go back to the past knowledge of those articles, as if an archaeologist to excavate the Dust-laden history, the disappearance of civilization, is a very valuable thing. so, If you are interested in digging for archaeology, go with me to dig and dig ~ ~second, CSS Counter triangular relationship digging and diggingCSS counters only <code>content</code> work with attributes, and <code>content</code> properties seem to be used exclusively on <code>before</code> / <code>after</code> Pseudo-elements. so, there is, "counter ↔ pseudo element ↔content attribute" of the Iron Triangle Relationship.third, CSS counter members digging and diggingThe CSS count is the same as our military training! now, let us quietly close our eyes, let the thoughts fly to the University of spring, that hot summer, the broad military training ground, you ... What did you think of? --"the sister in the next class is a good juicy, I like it so much." What's the other thing? --"the beautiful Sister-in-the-thigh has walked leisurely from the front, leaving a fragrance to take my heart." ......Mean to find smoke ah! Even if the color heart full, the head is full of knives, should also think, handsome instructors have wood! The common bitter base friend has the wood to have! The slogan of the loud and the wood has! Sharp count of Wood there!Speaking of Count off, whether think of the Instructor's Clarion slogan: "sheng Letter 4 class, attention, at ease, began 1,2,3,4 count!" ”There are a couple of key points: 1. class naming . Can not six-pulse sword one finger, you, lennon, you call it ~ There is a name, such as Sheng Xin 4 class, You know who is who. 2. count the Rules. 1,2,3,4 increment Count off, or 1,2,1,2 count off, let class of people know. 3. Start count off . Do not send a password, at, will disorderly order.coincidentally, the above 3 key points correspond to the CSS Counter's 2 properties and a method, in turn: 1. counter-reset 2. counter-increment 3. Counter ()/counters ()In Turn. 1. counter-reset As implies means "counter-reset". In fact, "class naming", The main role is to give a counter name. If possible, by the way, tell which number starts Counting. The default is <code>0</code> , note that the default is <code>0</code> instead of <code>1</code> . there may be classmates back to the doubt, the various examples of the Web on the default display of the 1th number is not <code>1</code> it? That is because of the <code>counter-increment</code> influence of the sun, will be explained in detail later.OK, here, Let's take a look at two simple <code>counter-reset</code> examples:<pre><pre>. XXX {counter-reset:small-apple;}/* counter name is ' Small-apple ' */</pre></pre><pre><pre>. XXX {counter-reset:small-apple 2;}/* counter name is ' Small-apple ', and the default starting value is 2 */</pre></pre>Well known as the meeting, you can ruthlessly click Here: counter-reset value of 2 simple demo<code>counter-reset</code>The count reset can be negative, for example <code>-2</code> . Can also be written as a decimal, for example <code>2.99</code> , ie and Firefox are not recognized, considered to be illegal values, direct disregard, as the default value <code>0</code> to deal with; but Chrome is not too poor jealous rich, any decimal is rounded down, as <code>2.99</code> <code>2</code> treated, So Wangxiao is still the Wangxiao.End no, not Too! <code>counter-reset</code>There is also a hand, that is, multiple counters named at the same time. For example, Wangxiao and Wangxiao are on the same stage:<pre><pre>. XXX {counter-reset:wangxiaoer 2 Wangxiaosan 3;}</pre></pre>Direct spaces, such as commas, do not Work.Well-known as a meeting, you can click Here: Two technical names Co-demoIn addition, <code>counter-reset</code> you can set to <code>none</code> and <code>inherit</code> . kill reset and Inheritance Reset. You know, it's not going to Unfold.2. counter-increment As implies meaning, that is, "counter-increment" means. A value <code>counter-reset</code> of 1 or more KEYWORDS. You can follow a number to indicate the value of the change for each count. If default, The default change value is used <code>1</code> (for convenience, The default values are used for instructions below).The counter count of the CSS is a set of rules, and I call it the "shining rule" visually. in particular, the Counter-reset is the only one, each shining (counter-increment) 1 times, shining source increased 1 times the Value. therefore, we can explain the above mentioned "default value is <code>0</code> " problem. Usually when the CSS counter application, we will use <code>counter-increment</code> , it must use this, otherwise how to increment it! And generally is the <code>1</code> second, just the <code>+1</code> first count of the value is <code>1</code> (0+1=1)!below, through a few examples, give you a visual display of the rules of the shining .① You can really click Here: Wangxiao counter-increment Shine Cheng DemoIn the demo, the <code>counter-reset</code> value of Wangxiao is <code>wangxiaoer 2</code> , however, the displayed count is not small <code>2</code> but small <code>3</code> , Wangxiao becomes Wangxiao! demo-related Core Code:<pre><pre>. Counter {counter-reset:wangxiaoer 2; counter-increment:wangxiaoer;}. Counter:before {content:counter (wangxiaoer);}</pre></pre><pre><pre></pre></pre>Here <code>counter-increment</code> shines the <code>p</code> label, the <code>counter-reset</code> value increases, the default increment <code>1</code> , so the count from the set of initial value <code>2</code> into <code>3</code> , <code>wangxiaoer</code> is the counter here, the natural pseudo-element content value <code>counter(wangxiaoer)</code> is <code>3</code> .② , of course, can also shine on itself, which is <code>counter-increment</code> directly set on Pseudo-elements:<pre><pre>. Counter {counter-reset:wangxiaoer 2;}. Counter:before {content:counter (wangxiaoer); counter-increment:wangxiaoer;}</pre></pre><pre><pre></pre></pre>is still 1 times shining, still the global counter <code>+1</code> , so the value displayed is still <code>3</code> (demo slightly).③ the Strike. What happens if both the parent and child elements are <code>counter-increment</code> illuminated 1 times?Very simple, the parent element 1 times shines, the child element 1 times shines, altogether two times shines, <code>counter-reset</code> sets the counter value to increase 2 times, the count starting value is 2, so the real number is <code>4</code> !You can click Here: counter-increment father and son continuous shining Demodemo-related Core Code:<pre><pre>. Counter {counter-reset:wangxiaoer 2; counter-increment:wangxiaoer;}. Counter:before {content:counter (wangxiaoer); counter-increment:wangxiaoer;}</pre></pre><pre><pre> //display is 4</pre></pre>In a word, no matter where the location, as long as there <code>counter-increment</code> , the corresponding counter value will change, <code>counter()</code> just output!④ Understand the "rules of the sun", then the usual counter-increment effect can also be understood.Consider the following two questions: <ol> <ol> <li>Dad was shining, and resetting the default <code>0</code> , Dad had 2 kids. The children themselves are not shining. What is the value of two children?</li> <li>Dad didn't shine, reset <code>0</code> the default, dad has 2 Children. The children themselves are receiving the SHINE. What is the value of two children?</li> </ol> </ol>The answer is:Oh? The answer is different, what's the difference?Very simple. What father, child you don't care. As long as the look was illuminated several times. Situation 1 father is shining, therefore, the counter increases 1 times, at this time two children of nature are, the <code>counter</code> <code>1</code> situation 2, two children were illuminated 2 times, the 1th child shines, counter +1, that is 1, the 2nd child when the sun shines +1, so 2 Children. The <code>counter</code> output is <code>1,2</code> .You can click Here: Brother Increment Rule demo DemoThe demo corresponds to the 2nd question above, The result is as Follows: The core code is as Follows:<pre><pre>. Counter {counter-reset:wangxiaoer 2;}. Counter:before,.counter:after {content:counter (wangxiaoer); counter-increment:wangxiaoer;}</pre></pre><pre><pre></pre></pre>The value of the counter varies according to the HTML rendering order, <code>increment</code> when a counter is encountered, and when <code>counter</code> the output is output, the count value at that Time. understand, you will naturally understand the "rules of the sun."If you do not understand, you can click here to see the HTML and CSS source code, feel the <code>increment</code> incremental "shine rule."Counter-increment Other Settings ① <code>counter-reset</code> can name two counter names at a time, <code>counter-increment</code> naturally there is a corresponding setting, also the name can be left Blank.You can really click Here: counter-increment multi-name Application Demo ② As mentioned in this section, the value of this change is not necessarily <code>1</code> , we can set it flexibly. For example:<pre><pre>Counter-increment:counter 2</pre></pre>That is the increase in even even Numbers. For example, The following changes the Body: It can also be negative, for example:<pre><pre>Counter-increment:counter-1</pre></pre>It has a descending sort effect!the ③ value can also be <code>none</code> either <code>inherit</code> .3. Counter ()/counters () This is a method, not a Property. Calculated in a similar CSS3 <code>calc()</code> . Here the function is very simple display Count. however, There are multiple names and usages: ① So far, what we've seen is the simplest usage:<pre><pre>Counter (name)/* name is Counter-reset */</pre></pre>② What does it mean by the following syntax?<pre><pre>Counter (name, Style)</pre></pre>There are <code>style</code> some things about the parameters Here. The supported keyword values are those that are <code>list-style-type</code> Supported. The effect is that we increment the decrement may not necessarily be the number, also may be the English letter, or Roman and so On. <blockquote> <blockquote> list-style-type: Disc | Circle | Square | decimal | Lower-roman | Upper-roman | Lower-alpha | Upper-alpha | none | Armenian | cjk-ideographic | Georgian | Lower-greek | Hebrew | Hiragana | Hiragana-iroha | Katakana | Katakana-iroha | Lower-latin | Upper-latin </blockquote> </blockquote>Fame is better than meeting. You can ruthlessly click Here: CSS Counter counter () method style parameter demoResults See Below: The core CSS code is:<pre><pre>Content:counter (wangxiaoer, lower-roman); /* indicates the value of the current counter wangxiaoer in lowercase Roman number format */</pre></pre>③ counter also supports Cascading. That is, a <code>content</code> property value can have more than one <code>counter()</code> method.Fame is better than meeting. You can really click Here: Multiple counter cascade co-exist DemoThe core css/html are as Follows:<pre><pre>. Counter {counter-reset:wangxiaoer 2 Wangxiaosan 3;}. Counter:before {content:counter (wangxiaoer) ' \a ' counter (wangxiaosan); white-space:pre;}</pre></pre><pre><pre></pre></pre>The above CSS source code uses the <code>‘\A‘</code> <code>inline</code> horizontal element to wrap, if this technology is interested, you can refer to the previous "use CSS (unicode characters) to wrap inline horizontal elements" article.④ The following methods are described below <code>counters()</code> . It seems that the value is more than a letter <code>s</code> , but the ideographic Change. <code>counters</code>is almost synonymous with nesting counts .Our usual serial number, it is impossible <code>1,2,3,4,..</code> to just, there will be such as <code>1.1,1.2,1.3,...</code> the Sub-serial number. , the former is the <code>counter()</code> thing to do, the latter is <code>counters()</code> the thing to do.The basic usage is:<pre><pre>Counters (name, string); /* MDN said, to IE8 compatibility, here the comma after the space to be removed, but I IE11 IE8 mode, no This problem * *</pre></pre>Where the <code>string</code> argument is a string (enclosed in quotation marks) (required), which represents the connection string for the Sub-ordinal. For <code>1.1</code> example <code>string</code> <code>‘.‘</code> , that <code>1-1</code> is <code>‘-‘</code> .It looks simple. however, if the understanding is not very deep, in the future use will certainly encounter trouble-"eh?" Why is there no sub-sequence, clearly grammatical correct ah? "first of all, Remember this sentence," the source is the only ", so if you are only <code>body</code> set on the label <code>counter-reset</code> , even if the inside of the child elements nested bastard, or there will be no nested sequence number appear! therefore, in order to implement nesting, it is necessary for each list container to have a "shining source", through the child generation of the father's <code>counter-reset</code> reset, matching <code>counters()</code> method to achieve the count nesting Effect.Fame is better than meeting. You can really click Here: CSS counter inline demowill also encounter such trouble-"ah, how the sub-sequence is not in the order of the hierarchy, the naming grammar is correct ah?" "still remember this:" a container of the source of the Sun (reset) is unique, so if you accidentally put the count display and technology reset elements in the form of sibling elements (although the HTML content layout rendering is no exception), it is likely to appear in the case of counting the number of random.Fame is better than meeting. You can click Here: CSS counter counters list is reset into the demoYou will see the red part of the serial number shows an exception!Why this problem occurs, let's look at the HTML (mostly comments):<pre><pre><div class= "reset" > <div class= "counter" > I am Wangxiao </div> <div class= "reset" ><-- The reset here is a brotherhood, not a parent-child relationship, with the counter Above. Although there is no difference in layout rendering. however, a container of Reset's only, once the child element appears reset, will change the entire container nesting relationship, so, the back of the "Wangxiao", "wang Xiao four" has actually entered the Level 2 nesting, so the display is 1-3 and 1-4-- ... </div> <div class= "counter" > I am Wangxiao </div> <div class= "counter" > I am Wangxiaoxi </div> <div class= "reset" > <div class= "counter" > I am Wangxiaoxi's older son </div> </div></div ></pre></pre>If the above comment is not clear, you can follow the previous no problem of the demo HTML structure comparison, perhaps will be enlightened!⑤ <code>counters()</code> is also supported <code>style</code> for custom incrementing Forms.<pre><pre>Counters (name, string, Style)</pre></pre><code>counter()</code> <code>style</code> use consistent with the parameters, do not repeat.Iv. CSS counter and display:none digging and diggingAn element, if set <code>counter-increment</code> , but whose <code>display</code> property value is <code>none</code> or contains a <code>hidden</code> property (for a supported browser), the value of this count is not incremented. And <code>visibility:hidden</code> There are other statements that do not have this Phenomenon.five, CSS Counter practical application digging and diggingCompared to the traditional <code>ol</code> , <code>ul</code> list count, The advantage of CSS counter is flexible and powerful, insufficient is IE6/IE7 not support.The first rule of the Sun shines, the source is the only One. so, we can put two far-off lists at the tail and the ends, and then the lists automatically show the serial Numbers. And <code>ol/ul</code> can only write dead <code>start</code> realization, very inflexible, Once the list has been cut, the Belch fart.Because the counter is displayed with Pseudo-element Control. therefore, we can almost apply a variety of CSS styles, various positioning and so On. so, basically, You can use CSS counters as long as there is an orderly ordinal rendering.For example, the E-commerce homepage of the picture slide advertisement on the <code>1,2,3,4,...</code> serial number; We do the HTML5 Web slides that we use when we share them, and we can use CSS counters to label pages, and so on, and 3 options for the juice tools that were made for the little friends at the Beginning.I was writing a few high-fidelity examples in the beginning, and wrote here that there is a lot of content. A technical article, if read for 2 minutes, found only half read, after the content will be lightning, and then there will be some inexplicable comments and so On. therefore, The article is not easy too long. so, Here's the end!six, The final excavation summaryThe amount of the CSS counter is really deep. If you don't meditate, you will fall into a lot of mistaken assumptions. If you don't learn it all, you won't be able to feel the great potential of CSS Counters. As far as I'm concerned, I really dug up a big baby. I wonder what the results of the excavation are for you here?haste, omission inevitably, If there is a mistake, welcome to correct; Welcome to communicate Welcome to communicate, More Welcome to read this article after a few technical points of challenge![CSS Counter counter] CSS counter counter (serial number character Auto Increment) application problem explanation and example demonstration

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

[CSS Counter counter] CSS counter counter (serial number character Auto Increment) application problem explanation and example demonstration

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

[CSS Counter counter] CSS counter counter (serial number character Auto Increment) application problem explanation and example demonstration

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support