Css knows (6) -- selector priority, css knows selector priority

Css knows (6) -- selector priority, css knows selector priority
1. Introduction

In the last section css knows (5) -- selector, too many selector types will cause some problems. What is the problem? Let's give an example.

　　

In css, the two selectors are for <span>, and the colors of the two settings are different. Which of the following commands does <span> follow?

The above is relatively simple, and the following is a complicated one:

　　

<Li> what color should I display?

2. Specialization

To solve the above problems, we need to introduce a concept-specificity ). Degree of specialization indicates the importance of a css selector expression. A formula can be used to calculate a value. The larger the number, the more important it is.

This computation is called the formula of I-C-E,

1. I -- Id;
2. C -- Class;
3. E -- Element;

That is, for a css selector expression, if you encounter an id, you can add 100 to the specified degree value, and if you encounter a class, you can add 10 to the specified degree value, when an element is encountered, add 1 to the specified degree.

Here are a few examples of css expressions that are specific to the degree calculation result. You can calculate them yourself, right:

CSS selector expression	Computing Result
P	1
P. large	11
P # large	101
Div p # large	102
Div p # large ul. list	113
Div p # large ul. list li	114

Pay attention to the following points :! Important has the highest priority. * The selector has the lowest priority.

Now, you can return to the two questions raised at the beginning of the article. Based on the specific degree calculation formula, the browser will give priority to which calculation result is large.

3. simplified rules

If you think the above calculation is too complex, there is a simplified rule. It has only three rules. These three rules can cover most cases and are easy to remember.

Rule 1: a selector containing an ID is better than a selector containing a Class. A selector containing a Class is better than a selector containing an element. For example, the first one is more specific:

　　

Rule 2: when comparing the specificity of different selectors, the loading sequence is not differentiated (when the same selector is stacked, the latter is loaded before overwriting). For example, although the latter is loaded, however, low specialization:

　　

Rule 3: The set style is higher than the inherited style. For example:

In fact, in most cases, you can use this simple rule to determine the priority of the selector.

4. Personal Experience

WangEditor is a rich text editor developed by myself. When I first configured the demo page in the blog garden, I encountered the css selector priority problem, which has now been solved. Demo address: http://www.cnblogs.com/wangfupeng1988/p/4198428.html

For down menus, such as font selection and font size, I used Class in the css of wangEditor. Who knows that there is an existing style in the blog garden page, higher than mine:

　　

In the demo I configured, ul's margin-left is still 45px, And the css I wrote is clearly set to 0px. The reason is that the css selector of the blog garden has a higher priority than the one I wrote.

Of course, I changed the id selector to solve this problem.

5. Summary

The content of this section is a key point. I have seen the question of css priority in many interview questions. Css priority is not troublesome. As long as you have mastered the appropriate method to learn, you will get started in one night and wish you good luck.

Bytes -------------------------------------------------------------------------------------------------------------

Welcome to my tutorial:From design to Model《Deep understanding of javascript prototype and closure SeriesMicrosoft petshop4.0 source code explanation video json2.js source code interpretation video

Welcome to my open-source project --WangEditor, simple and easy-to-use rich web text editor

Bytes -------------------------------------------------------------------------------------------------------------