Shulou(Shulou.com)06/03 Report--

This article mainly explains the "CSS counter sequence digital characters automatic increment method tutorial", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn the "CSS counter sequence digital characters automatic increment method tutorial"!

Digging graves is not shameful

The CSS counter is nothing new. I mentioned it in my article "CSS content content Generation Technology and applications" in the spring of 10 years (see figure below), but it was introduced as one of them at that time. Like a routine new colleague, although I was as black as coke and impressed my new colleagues when I introduced myself, I was only one of them because of the vast number of colleagues introduced. Naturally, after a month or so, I will be mercilessly forgotten, except for the vaguely face, because after all, it is quite abstract.

However, the amount of CSS counter obviously can not be revealed by just a few sentences of introduction, so that people can not be judged by appearance. Just like me, maybe some month of one year, my new colleague who was slipped away like a donkey finally got his head caught in the door. He remembered my voice and face and asked me for help.

That's what happened to me recently.

When making some fruit juice system for colleagues in the department, because fruit juice shops are often out of stock due to the outbreak of fruit products, each person can choose three kinds of drinks that are free to match. As a result, there is the first choice, the second choice, the third choice.

Originally, I wrote it in the label in plain text. So heavy and tired, I feel like I won't love anymore! At this time, suddenly there was a white light in front of my eyes, the lunch break was over, and my aunt turned on the lights in the office. This flash of thoughts suddenly reminds me of the "CSS counter" on the bank of Daming Lake. In those days, mobile web was still reckless, and IE 6 or 7 made waves. This attractive skill is halved by the compatibility of the environment, even if it is made known to the world.

But now it is different, we have caught up with a better era: English teachers engaged in the traditional industrial production of hammers, film and television stars sacrificed their lives to go to prison to shoot blockbusters; those previously restricted by IE6/IE7 incompatible and invisible advanced CSS/JS features have also come to the stage, CSS counter is one of them. So I picked up my small spade of fishing and earthworms to dig the grave of the CSS counter. Although there are some articles about CSS counter on the Internet, most of them are not comprehensive enough, the cases are not wonderful enough, and it is not convenient to consult them. It is like a rented house, although it can protect me from the wind and rain, but the decoration style is not my own, and I am not sure that the landlord can borrow an east wind and blow me away. So, it's necessary to keep your own hands, dig a grave and build a house.

For the pure technical circle, digging graves is not shameful. We re-excavate the knowledge of those articles in the past, just like an archaeologist to dig up the dusty history and the vanishing civilization, which is a very valuable thing. So, if you are interested in digging and archaeology, come with me to dig.

2. Trigonometric relationship of CSS counter

CSS counters only work with the content attribute, which seems to be used exclusively on before/after pseudo-elements. Thus, there is the iron triangle of "counter ↔ pseudo-element ↔ content attribute".

3. Members of CSS counter dig

The CSS count is the same as our military training report! Now, let us quietly close our eyes, let our thoughts fly to the green university, that hot summer, that broad military training venue, you … What do you think of? -- "the girl in the class next door is so good-looking and so cute. I love it." Excuse me, what else? The beautiful sister with bare thighs walked leisurely in front of her, leaving a fragrance and taking away my heart.

Try to find a smoke! Even if you are full of lust and your head is full of knives, you should also think about whether there are any handsome instructors! Are there any gay friends who share hardship? Are there any loud slogans? Do you have a sharp report?

When it comes to counting, do you think of the drillmaster's loud slogan: "Shengxin Class 4, attention, at ease, start 1, 2, 3, 4, 4!"

There are several key points:

1. Name the class. You can't always point to the six-pulse god sword. You, Nong, you can call it. If you have a title, such as Shengxin Class 4, you will know whose is who.

two。 The rule of counting. Let the people in the class know that the number of reports is increased step by step, or the number of reports is increased step by step, or the number of reports is increased step by step, or the number of people in the class is let the class know that the number is increased step by step.

3. Start counting. If you don't give a password, you will be out of order if you stare and stare.

Coincidentally, the above three key points correspond to two properties and one method of the CSS counter, in turn:

1. Counter-reset

2. Counter-increment

3. Counter () / counters ()

In turn.

1. Counter-reset

As the name suggests, it means "counter-reset". In fact, it is "class naming", the main function is to give a name to the counter. If possible, by the way, tell me which number to start counting. The default is 0. Note that the default is 0 instead of 1. Some students may wonder, isn't the first number shown by default in all the examples on Nima? That is because of the influence of counter-increment, which will be explained in detail later.

OK, here, let's look at two simple examples of counter-reset:

CSS Code copies content to the clipboard

.xxx {countercounter-reset: small-apple;} / * counter name is' small-apple' * /

.xxx {countercounter-reset: small-apple 2;} / * the counter name is' small-apple', and the default starting value is 2 * /

It is better to meet each other than to be famous. You can click here: counter-reset is 2. Simple demo.

The count reset for counter-reset can be negative, for example,-2. Can also be written as a decimal, such as 2.99, but IE and FireFox are not recognized, that is, illegal values, directly ignore, as the default value of 0 to deal with; but Chrome is not too poor and jealous of the rich, any decimal is rounded down, such as 2.99 as 2 processing, so Wang Xiaoer is still that Wang Xiaoer.

That's it? No, no, no! Counter-reset also has the skill of naming multiple counters at the same time. For example, Wang Xiao er and Wang Xiao San appeared on the stage at the same time:

.xxx {counter-reset: wangxiaoer 2 wangxiaosan 3;}

Direct space separation, such as commas and so on.

It is better to meet each other than to be famous. You can click here: two technical names coexist demo

In addition, counter-reset can also be set to none and inherit. Kill reset and inherit reset. You know, it's not going to unfold.

2. Counter-increment

As the name suggests, it means "counter-increment". One or more keywords with a value of counter-reset. It can be followed by a number to indicate the change in each count. If default, the default change value of 1 is used (for convenience, the following are illustrated with default values).

There is a set of rules for counting counters in CSS, which I vividly call "universal rules". Specifically, it is: the universal source (counter-reset) is unique, and the count value of the universal source is increased once for every counter-increment.

Therefore, we can explain the problem of "default value is 0" mentioned above. Usually when CSS counter is used, we will use counter-increment. We must use this, otherwise how can we increment it? And it is usually a general photo, exactly + 1, the first count of the value is 1 (0-1-1)!

Below, through a few examples, to give you a visual display of the rules.

① you can click here: Wang Xiaoer counter-increment Puzhao Wang mistress demo

In demo, the counter- score of Wang Xiaoer is wangxiaoer 2, but the count displayed is not small 2 but small 3, Wang Xiaoer becomes Wang Xiao San!

The core codes related to Demo are:

The code is as follows:

.counter {counter-reset: wangxiaoer 2; counter-increment: wangxiaoer;}

.counter: before {content: counter (wangxiaoer);}

Here the counter-increment illuminates the p tag, and the counter-reset value increases by 1 by default, so the count is changed from the initial value of 2 to 3, and the natural pseudo-element content counter (wangxiaoer) is 3.

Of course, ② can also illuminate itself, that is, counter-increment is directly set on pseudo elements:

The code is as follows:

.counter {counter-reset: wangxiaoer 2;}

.counter: before {content: counter (wangxiaoer); counter-increment: wangxiaoer;}

It is still a general illumination, and the global counter is still + 1, so the displayed value is still 3 (demo).

③ strikes while the iron is hot. What happens if both parent and child elements are illuminated by counter-increment once?

Very simply, the parent element is illuminated once, the child element is illuminated once, and the counter value set by counter-reset is increased twice, and the starting value of counting is 2, so the actual number is 4!

You can click here: counter-increment father and son continuously take pictures of demo

The core codes related to Demo are:

The code is as follows:

.counter {counter-reset: wangxiaoer 2; counter-increment: wangxiaoer;}

.counter: before {content: counter (wangxiaoer); counter-increment: wangxiaoer;}

/ / 4 is displayed

All in all, no matter where the location is, as long as there is counter-increment, the value of the corresponding counter will change, and counter () is just the output!

If ④ understands the "universal rule", it can be understood by our usual counter increment effect.

Consider the following two questions:

The father is illuminated and resets the default value of 0. The father has two children. The children don't even have a general picture of themselves. What is the count for two children? The father has no universal photo, the default value is 0, and the father has two children. The children themselves are generally illuminated. What is the count for two children?

The answer is: 1, 1 and 1, 1, and 2!

Oh? The answer is different. What's the difference?

It's simple. Don't even care about the father or the child. As long as it has been photographed a few times. In case 1, the father is illuminated, so the counter is increased once, and the counter of both children is naturally 1; in case 2, the two children are illuminated twice, and when the first child is illuminated, the counter is + 1, that is, 1; when the second child is illuminated, the counter is + 1, so it is 2. As a result, the counter output of the two children is 1BI 2.

You can click here: brother incremental rule demo demo

Demo corresponds to the second question above. The screenshot of the result is as follows:

The core code is as follows:

The code is as follows:

.counter {counter-reset: wangxiaoer 2;}

.counter: before,.counter:after {content: counter (wangxiaoer); counter-increment: wangxiaoer;}

The numerical value of the counter changes according to the HTML rendering order, and it changes when you encounter an increment counter, and the count value is output whenever the counter output is output. If you understand the picture below, you will naturally fully understand the "universal rules".

If you don't understand the above picture, you can click here to view the HTML and CSS source code and feel the increasing "universal rules" of increment.

Counter-increment other Settings

① counter-reset can name two counter names at a time, and counter-increment naturally has settings that correspond to it, and the name can be left blank.

You can click here: counter-increment multiple names apply demo at the same time

② as mentioned at the beginning of this section, the value of this change is not necessarily 1, we can set it flexibly. For example:

Counter-increment: counter 2

That is the increase of even and even numbers. For example, the following transformation:

It can also be negative, for example:

Counter-increment: counter- 1

There will be a decreasing sorting effect!

The ③ value can also be none or inherit.

3. Counter () / counters ()

This is a method, not an attribute. Similar to the calc () calculation in CSS3. The function here is very simple to display the count. However, there are many names and uses:

What we have seen so far is the simplest use of ①:

Counter (name) / * name is the name of counter-reset * /

②, what does the following grammar mean?

Counter (name, style)

There are some tricks in the style parameters here. The key values it supports are those supported by list-style-type. The function is that our increments and decrements may not be numbers, but also English letters, or Roman, and so on.

List-style-type:disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | none | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

It is better to be famous than to meet. You can click here: CSS counter counter () method style parameter demo

The results are shown in the screenshot below:

The core CSS code is:

Content: counter (wangxiaoer, lower-roman); / * represents the value of the current counter wangxiaoer in lowercase Roman numeral format * /

③ counter also supports cascading. That is, a content attribute value can have multiple counter () methods.

It is better to be famous than to meet. You can click here: multiple counter cascades coexist demo

The core CSS/HTML is as follows:

The code is as follows:

.counter {counter-reset: wangxiaoer 2 wangxiaosan 3;}

.counter: before {content: counter (wangxiaoer)'\ A 'counter (wangxiaosan); white-space: pre;}

The above CSS source code uses'\ A'to wrap lines with inline horizontal elements. If you are interested in this technique, you can refer to the previous article "using CSS (Unicode characters) to wrap inline horizontal elements".

④ the counters () method is described below. It seems to be worth an extra letter s, but the meaning has changed greatly. Counters is almost synonymous with nested counting.

Our usual serial number can't just be 1Jing, 2Jing, 3Jing, 4Jing, but there will be something like 1.1Jing, 1.2 Jing, 1.3 Jing. The subserial number of the wait. Well, the former is what counter () does, and the latter is what counters () does.

The basic usage is:

Counters (name, string); / * MDN says that for IE8 compatibility, the space after the comma needs to be removed, but in IE11's IE8 mode, there is no such problem * /

Where the string parameter is a string (which needs to be surrounded by quotation marks) (required), which represents the connection string of the subsequence number. For example, 1. 1 string is'. 'and 1-1 is' -'.

It looks simple. However, if you do not understand it very deeply, you will certainly encounter trouble in using it in the future-"Huh? why is there no sub-sequence, which is grammatically correct?" First of all, remember this sentence, "Puzhao Source is unique", so if you only set counter-reset on the body tag, even if the child elements are nested for eighteen generations, there will not be any nested sequence numbers! Therefore, in order to achieve nesting, we must have a "universal source" for each list container, and the count nesting effect can only be achieved through the counter-reset reset of the children to the parents and the counters () method.

It is better to be famous than to meet. You can click here: CSS counter embedded demo

You will also encounter such trouble-"Hey, how come the sub-sequences are not in hierarchical order, and the naming syntax is correct?" Still remember this sentence: "the reset in a container is unique", so if you accidentally put the count display and technical reset elements together as sibling elements (although there is no exception in HTML content layout rendering), there is likely to be count sequence number infidelity.

It is better to be famous than to meet. You can click here: the counters list of CSS counters is messed into demo by reset.

You will see that the serial number of the red part is abnormal!

Why this problem occurs, let's take a look at HTML (mainly comments):

The code is as follows:

I'm Wang Xiaoer.

...

I am the mistress of Wang

I'm Wang Xiaosi.

I am the eldest son of Wang Xiao Si.

If you don't understand the above comments, you can compare the HTML structure with the previous demo, which is no problem, and it may suddenly become clear!

⑤ counters () also supports style custom incremental forms.

Counters (name, string, style)

It is consistent with the use of the style parameter of counter () and does not go into detail.

4. CSS counter and display:none digging

An element that is not incremented if counter-increment is set, but its display attribute value is none or contains the hidden attribute (for supported browsers). This is not the case with visibility:hidden and other claims.

5. Practical application of CSS counter

Compared with the traditional ol,ul list counting, the advantage of CSS counter is that it is flexible and powerful, but the disadvantage is that IE6/IE7 does not support it.

Rule number one, Puzhaoyuan is unique. So, we can put two very different lists at the beginning and the end, and then the lists automatically display the serial number. And ol/ul can only write dead start implementation, very inflexible, once the list has been deleted, it will die.

Because the counter is controlled by pseudo-elements. Therefore, we can almost apply a variety of CSS styles, various positioning and so on. So, basically, CSS counters can be used wherever the sequence number is presented.

For example, the pictures on the home page of e-commerce are slide ads with 1, 2, 3, 4, 4, 7, 5, 5, 5, 4, 4, 7, 4, 4, 5, 4, 4, 5, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, etc. Serial number

When we share HTML5 web online slides, we can use CSS counters to mark the number of pages, etc., as well as three choices of juice tools for our friends at the beginning.

At the beginning of my writing, I wanted to make a few examples of high fidelity. When I wrote here, I found that there was already a lot of content. If you read a technical article for 2 minutes and find that you are only halfway through it, the following content will flash by, and then there will be some inexplicable comments and so on. Therefore, the article is not easy to be too long. So, this place is coming to an end!

Thank you for your reading, the above is the content of the "CSS counter sequence digital character automatic increment method tutorial". After the study of this article, I believe you have a deeper understanding of the CSS counter sequence digital character automatic increment method tutorial, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.