CSS selector optimization level and matching principle

As a web developer, it is also important to have the necessary foreground technology, especially when you encounter some practical problems. Here is an example for you:

Adds a class to a P tag, but some of the attributes in that class do not work after execution. The Firebug view shows that the properties that are not working are overwritten. This time suddenly aware of the CSS selector priority problem, here is the CSS selector priority problem to do some summary.

Selector type

Strictly speaking, the type of selector can be divided into three kinds: Tag name selector, class selector and ID selector. The so-called descendant selector and group selector are simply extensions to the top three selectors. The way to write style= "" in a tag should be a way to introduce CSS, not a selector, because there is no selector at all. In general, there are 5 or 6 types of selectors that are combined in these ways.

Three basic selector types

The syntax is as follows:

Tag name selectors, such as: p{}, which use HTML tags directly as selectors.

Class selector, such as. polaris{}.

The ID selector, such as #polaris{}.

Note that the ID selector is very different from the class selector: The same ID cannot appear within a page, and the ID is often used by background developers, so the front-end developers should use as little as possible. Of course, the work with the backstage staff is very skilled, these will not become a limitation.

Extended Selector

Descendant selectors, such as. Polaris Span img{}, the descendant picker is actually using multiple selectors plus an intermediate empty glyd to find the specific control label.

Group selectors such as div,span,img{}, group selectors are actually a simplified way of writing CSS, but putting together different selectors with the same definition saves a lot of code.

The priority level of the Selector

After understanding the various selectors, there is also an important point of knowledge is the CSS selector priority. This is why Polaris will encounter the question at the beginning of the article. To give a simple example:

2. < Div class="polaris">
4. < span class="beijixing">
6. Beijixing
8. </ span >  
10. < span >  
12. Polaris
14. </ span >  
16. </ Div >  

If you have already set the font in the span below. Polaris to Red:

1. . Polaris span {color:red;}

At this point, if you want to change the color of the. Beijixing is blue, it cannot be implemented with the following command:

1. . beijixing {color:blue;}

This occurs because the latter command has insufficient priority and two conflicting style settings, and the browser executes only the higher priority.

So what is the priority of a selector?

In general , the more special The selector, the higher its priority. The more accurate the selector is, the higher its priority. Usually we use 1 to indicate the priority of the tag name selector, 10 for the class selector, and 100 to prioritize the ID selector. For example, in the example above. Polaris span {color:red;} The selector priority is 10 + 1 which is 11; the priority of the. Polaris is 10; The browser will naturally display the red Word. after understanding this, the following priority calculation is a breeze:

1. Div.test1. span var priority 1+10 +10 +1
2. Span#xxx. Songs Li priority 1+100 + 10 + 1
3. #xxx-li Priority 100 +1

In the case of what selectors to use, the principle of using different selectors is: first: Accurate selection of the label to be controlled; second: Use the selector with the most reasonable priority; Third: HTML and CSS Code are as concise and beautiful as possible. Usually:

1. The most commonly used selector is the class selector.

2, Li, TD, DD and so on often a large number of consecutive, and the same style or similar label, we adopt the class selector and tag name selector combination of the descendant selector. XX Li/td/dd {} mode selection.

3, very few cases will use the ID selector, of course, many front-end developers like Header,footer,banner,conntent set to the ID selector, because the same style in a page can not have a second time.

Here we have to mention the use of CSS in the tag to write CSS, that is:

1. < Div style="color:red">polaris</Div >

The priority at this time is the highest. We give it a priority of 1000, which is not recommended, especially for beginners. This also completely violates the idea of the separation of content and display. The merits of div+css can no longer be reflected.

The orientation principle of descendant selectors

Here's a look at the descendant selector, how does the browser find the element?

Browser CSS matches are not found from left to right, but from right to left. For example Div#divbox p span.red{color:red;}, the browser looks in the following order: First find all the class= ' red ' span elements in the HTML, find it, and then find out if there are any p elements in their parent elements. Again determine if the parent element of P has a DIV element with ID divbox, and if all exists then match.

The benefit of browser lookup from right to left is to filter out extraneous style rules and elements as early as possible. such as the following HTML and CSS:

2. < style >  
4. Div#divbox p span.red{color:red;}
6. > < style >  
8. < Body >  
10. < Div id="Divbox">
12. < P > < span > S1 </ span > </ P >  
14. < P > < span > S2 </ span > </ P >  
16. < P > < span > S3 </ span > </ P >  
18. < P > < span class=' red '>S4</span ></p >
20. </ Div >  
22. </ Body >  

If you look from left to right, you will find many unrelated p and span elements first. If you look from left to right, you first find the elements of <span class= ' Red ' >. Firefox calls this search method key selector (keyword query), the so-called keyword is the last (rightmost) rule in the style rules, the key above is span.red.

Simple, efficient CSS

The so-called efficient CSS is to allow the browser to find a style matching elements to try to do less search, listed below some of our common write CSS to make some inefficient errors:

Do not use the label signature before the ID selector

General wording: Div#divbox

Better notation: #divBox

Explanation: Because the ID selector is unique, adding a div instead adds an unnecessary match.

Do not use the label signature before the class selector

General wording: span.red

Better notation:. Red

Explanation: Same as the first one, but if you define more than one. Red, and under different elements are not the same style, you can not remove, such as your CSS file defined as follows:

1. p.red{color:red;}
2. Span.red{color: #ff00ff}

If this is defined, do not remove, it will be confused after removal, but it is advisable not to write this

Use hierarchical relationships sparingly

General wording: #divBox P. red{color:red;}

A better notation:. red{..}

Use class instead of hierarchical relationships

General wording: #divBox ul Li A{display:block;}

Better notation:. Block{display:block;}

Original link:http://polaris1119.javaeye.com/blog/764428