CSS selector category, priority and matching principle

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

Adds a class to a P tag, but some properties 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 on the CSS selector priority issues do some summary.

51CTO Recommended reading: Cleverly use CSS selector

selector category

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 only extended applications for the first three selectors. The way to write style= "" in a label should be a way of introducing CSS, not a selector, because there is no use of selectors at all. And people usually combine the above several ways, so there are 5 or 6 kinds of selectors. The

three basic selector types

syntax is as follows:

Label name selector, such as: p{}, that is, use HTML tags directly as selectors. The

class selector, such as. polaris{}. The

ID selector, such as #polaris{}.

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

Extension selector

descendant selector, such as. Polaris Span img{}, the descendant selector is actually using multiple selectors plus the middle empty cells to find specific control labels.

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

Selector Priority

Once you know the various selectors, there is one important point of knowledge that is the priority of the CSS selector. This is why Polaris encounters a problem with the beginning of the article. For a simple example:
 

Copy Code code as follows:


<div class= "Polaris" >


<span class= "beijixing" >


beijixing


</span>


<span>


Polaris


</span>


</div>

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

. Polaris Span {color:red}
At this point, if you want to change the. Beijixing color is blue, the following command is not possible:

Copy Code code as follows:


. beijixing {color:blue;}

occurs because the latter command is not prioritized, two conflicting style settings, and the browser only executes the higher-priority one.

So what is the priority of the selector?

In general, the more special The selector, the higher its precedence. The more accurate the selector points to, the higher its priority. Usually we use 1 to indicate the priority of the tag name selector, 10 for the priority of the class selector, and 100 for the priority of the ID selector. For example, in the previous example. Polaris span {color:red} The selector priority is 10 + 1, which is 11, and the. Polaris priority is 10; The browser will naturally display red words. Having understood this reason, the following priority calculations are easy:

Div.test1. span var priority 1+10 +10 +1
span#xxx. Songs Li priority 1+100 + 1
#xxx Li Priority +1
for what selectors to use, the principle of using different selectors is: first: Accurate to select the label to control; second: Use the most reasonable priority selector; Third: HTML and CSS code as simple and beautiful as possible. Typically:

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

2, Li, TD, DD, etc. often appear in a large number of consecutive, and the same style or similar labels, we use the class selector and tag name selector combined with the descendant selector. xx Li/td/dd {} of the way to choose.

3, in rare cases, with ID selectors, and of course many front-end developers prefer Header,footer,banner,conntent to the ID selector because the same style is not possible for a second time on a page. The

has to be used to write CSS in a way that introduces CSS within the label, that is,

<div style= "color:red" >polaris</div>
is the highest priority at this time. We give it a priority of 1000, which is not recommended, especially for beginners. This also completely violates the idea of content and display separation. The advantages of DIV+CSS can no longer be reflected.

descendant selector positioning principles

Here's how browsers look for elements for descendant selectors?

Browser CSS matches are not found from left to right, but are found from right to left. For example, Div#divbox p span.red{color:red}, the browser's lookup order is as follows: First find all the class= ' red ' span elements in HTML, and find out if there are any p elements in their parents ' elements. Then determine if there is a DIV element with ID divbox in the parent element of P, if all exist then match. The benefit of

browsers looking from right to left is to filter out extraneous style rules and elements as early as possible. such as HTML and CSS:

Copy Code code as follows:


&lt;style&gt;


Div#divbox p span.red{color:red;}


&gt;&lt;style&gt;


&lt;body&gt;


&lt;div id= "Divbox" &gt;


&lt;p&gt;&lt;span&gt;s1&lt;/span&gt;&lt;/p&gt;


&lt;p&gt;&lt;span&gt;s2&lt;/span&gt;&lt;/p&gt;


&lt;p&gt;&lt;span&gt;s3&lt;/span&gt;&lt;/p&gt;


&lt;p&gt;&lt;span class= ' Red ' &gt;s4&lt;/span&gt;&lt;/p&gt;


&lt;/div&gt;


&lt;/body&gt;

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

Concise, efficient CSS

The so-called efficient CSS is to let the browser find the style matching elements to do as little as possible, listed below some of our common writing CSS to make some inefficient errors:

Do not use label names before ID selectors

General: Div#divbox

Better: #divBox

Explanation: Because ID selectors are unique, adding DIV adds unnecessary matches.

Do not use the label name

As usual before the class selector: span.red

Better:. Red

Explanation: Same as the first, but if you define multiple. Red, and under different elements it is not the same style, You can't get rid of it, like you. The CSS file is defined as follows:

p.red{color:red;
Span.red{color: #ff00ff}
If you do not remove the definition, it will be confusing, but it is recommended that you do not write

as little as possible using a hierarchical relationship

General wording: #divBox P. red{co lor:red;}

Better:. red{.}

Use class instead of hierarchical relationships

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

Better:. Block{display:block;}