Special values for CSS selectors

Today from the front of the page to write good, began to work, first of all, as usual to deal with the navigation bar highlighting problems,

When it comes to dealing with highlighting, different people have different ways of doing things like:

// The nth a element under the element with the class name Nav . Nav a:nth-of-type (n) {color: #ff0000;}

Alternatively, set a different class name for each navigation column, and then set the highlighting for the navigation bar on the corresponding page;

Or, the navigation bar class name, with JS in each page for the current navigation bar to set the highlight style or add a highlight class names (style ahead of the set);

In short, the methods are varied.

For the page I got today, the first 4 a tags I used a:nth-of-type (n) to deal with, because the classmate on the navigation bar handling problems, 5th

column is not suitable for this method, so I just set a separate class name for it, and set the highlight on the column page, but it does not work.

The first time you press F12, review the elements:

(cough, this file name in Chinese people don't spit in the groove)

Above is the global style, of course, will be placed in the head of the HTML file, the following style is I write in the column of the current page, you can see, I wrote the highlight of the sample

Formula actually did not work, was covered, no reason ah, should be the style of highlighting before the style Ah, later on the home, so I looked at it,

1min later, a flash of light, the selector weight ah, so change the type selector (increase weight), so the problem solved satisfactorily.

This is thanks to the fact that I read through the "CSS authoritative guide" a long time ago, and I remember the concept of the special values (weights above).

This concept perfectly answers the question of "What works when you set multiple styles for an element."

In fact, when it comes to this, most people will answer the question of the external style, the embedding style, the inline style, and the priority of the three. Few people will mention special

The value of the book, so here is the importance of it.

The following is a description of this section in the third edition of the CSS Authoritative guide (each version may not be the same, but it's all about one thing)

I was looking at the fourth edition.

So now you know, not who gets closer to the element will use the style, and ultimately the selector's specific value to decide which style to use.

Special values for CSS selectors