On the precedence of selectors in CSS

Learning the Web front-end, the main learning course html5,css,js,ajax Some basic programming language, of course, this is a profound knowledge. And this article is mainly about my choice of CSS in the priority of some simple understanding and views, I hope that your learning to provide some help. Okay, nonsense, let's get started on the subject.

CSS Chinese interpretation is "cascading style sheet", here I would like to say that the so-called cascading style sheet means that we can give a label or text content at the same time to add a number of styles, simple point is that can be in a variety of ways to dominate the same thing. Then there is the problem of choosing a priority. It is whose property can be the ultimate goal of control. It can be said that CSS, is the selector and various properties of the use of together to define the HTML style.

Since the main point of this article is the CSS selector priority, then I would like to briefly introduce a few important CSS selectors. 1.id selector, 2. Type selector (tag selector), 3. Class selector, 4. Sequencer Selector, 5. Descendant selector, etc... Today the main introduction is the ID selector, class selector, and type selector. For the priority of selectors, we can use weights worth to measure, it is easy to understand. The greater the role of a part in the whole, the higher the weight will be, of course, the higher the priority. At this point we want to remember the allocation of weight values. First, the ID selector has a weight value of up to 100, followed by a class selector value of 10, and finally a tag selector value of 1. So is it that the ID selector is always the highest priority?? When it is not, the weight value has its own formula: the number of weight values =id selectors x100+ the number of class selectors x10+ the number of tag selectors X1. This is important. An example should be more obvious.

Example 1:

From this can be seen the weight of the high-priority selector, then someone will ask. If the weight value of the selector is the same, what is the priority level? Don't worry, this is just one of the few special cases that I'm going to say next. First, let's look at an example.

Example 2:

As can be seen from the above example, the weight of the selector is the same, but the font color is blue, so that: when the weight of the selector is the same, write in the back of the selector has a higher priority.

Then another scenario: when we use the class selector, what happens to our selectors, if there are multiple classes of attributes? Or look at the following example;

Example 3:

It is not difficult to see that when we conflict with the same label, the choice of CSS style written in the following selector is high priority, which is the same as the weight, the same situation in the same way.

All of these are cases where our selectors are able to select the element, so if our selector doesn't hit the tag we want to choose, it's another case.

2nd class: When the selector misses the selected label

First of all I want to say, when the selector is not hit the selected label, the previous calculation of the weight of the formula can not be used, should be for their weights do not need to calculate at all, the value is 0. No matter what selector he is, or the combination selector. This means that the weights of each selector are the same at this time. Since the weights are the same, is not the choice of CSS style written in the last face of the selector of high priority?? It's obviously not. In general, when our selector is unable to hit the selected label, we are going to adopt the nearest principle . Let's look at an example of the nearest principle.

Example 4:

There's one more important! Important attribute, he affects the calculation of the weight value, in general! The important attribute has three main points:

1.! The important property only increases the weight of the attribute without affecting the value of the selector;

2.! The important property does not change the weight of the inherited attribute, which is 0 or 0;

3.! The important attribute does not affect the nearest principle; Finally, summarize it. Let's take a look at this picture:

Well, I have to say so much, of course, there are certainly many incomplete articles and some errors, this is my own understanding, welcome Bo friends Correct mistakes.

Finally, I sincerely hope that this article will be helpful to your study. Thank you!!!

On the precedence of selectors in CSS