Detailed explanation of CSS selector, priority and matching principles

Add a class to a P label, but some attributes in the class do not work after execution. The firebug check shows that the property that does not work is overwritten. At this time, I suddenly realized the priority issue of the CSS selector. Here I will summarize the priority issue of the CSS selector.

51cto recommended reading:Cleverly use CSS Selector

Selector type

Strictly speaking, there are three types of selectors: 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. Writing Style = "" into the tag should be an introduction method of CSS, rather than a selector, because no selector is used at all. Generally, when we combine these methods, five or six selectors are available.

Three basic selector types

Syntax:

◆ Tag name selector, such as P {}, that is, HTML tags are directly used as the selector.

◆ Class selector, such as. Polaris {}.

◆ ID selector, for example, # Polaris {}.

Note that the ID selector is very different from the class selector: The same ID cannot appear in a page, and the ID is often used by background developers, therefore, front-end developers should try to use as few as possible. Of course, this will not be a limit when I work very well with the background staff.

Extended Selector

◆ Descendant selector, such as. Polaris span IMG {}. The descendant selector uses multiple selectors with spaces to locate the specific tag to be controlled.

◆ Group selector, such as Div, span, IMG {}. The Group selector is actually a simplified way of writing CSS, except that different selectors with the same definition are put together, saving a lot of effort.Code.

Selector priority

After learning about various selectors, another important point is the priority of CSS selectors. That's why PolarisArticle. A simple example:

2. <Div Class="Polaris"> 
4. <Span Class="Beijixing"> 
6. Beijixing
8. </Span> 
10. <Span> 
12. Polaris
14. </Span> 
16. </Div> 

If the font in the span under. Polaris has been set to Red:

1. . Polaris span {color: red ;}

If you want to change the. beijixing color to blue, the following command cannot be used:

1. . Beijixing {color: Blue ;}

This is because the priority of the next command is not enough. When two conflicting style settings are set, the browser will only execute the one with a higher priority.

So how do we set the priority of the selector?

Generally, the more special a selector is, the higher its priority is. That is, the more accurate the selector points, the higher its priority. Generally, we use 1 to indicate the priority of the tag name selector, 10 to indicate the priority of the class selector, and 100 to indicate the priority of the ID selector. For example, in the previous example, the selector priority of. Polaris span {color: red;} is 10 + 1, that is, 11, and the priority of. Polaris is 10. the browser will naturally display red characters. After understanding this truth, the following priority calculation is easy:

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

The principle of using different selectors is as follows: first, accurately select the tag to be controlled; second, use the selector with the most reasonable priority; and third: the HTML and CSS code should be as concise and beautiful as possible. Generally:

1. The most common selector is the class selector.

2. Li, TD, DD, and so on often appear in large numbers consecutively, and the style is the same or similar. We use the descendant selector that combines the class selector with the label name selector. select the XX Li/TD/DD {} method.

3. In rare cases, the ID selector is used. Of course, many front-end developers prefer header, footer, banner, and conntent to be set to ID selector, because the same style cannot be used twice on a page.

Here, we have to use the method of introducing CSS into the tag to write CSS, that is:

1. <Div Style="Color: Red">Polaris</Div> 

At this time, the priority is the highest. We give it a priority of 1000, which is not recommended for beginners. This completely violates the idea of separation of content and display. The advantages of Div + CSS cannot be further reflected.

Positioning principle of descendant Selector

Here we will introduce how the browser looks for elements for the descendant selector?

In the browser, CSS matching is not performed from left to right, but from right to left. For example, div # divbox P span. red {color: red;}: the browser's search order is as follows: first, search for all the span elements of class = 'red' in HTML. Then, check whether the parent element contains P, and then determine whether the parent element of P contains DIV elements with ID divbox. If all elements exist, match the parent element.

The advantage of the browser searching from right to left is to filter out irrelevant style rules and elements as soon as possible. For example, 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 search from left to right, you can find many irrelevant P and span elements first. If you search from left to right, you first find the <SPAN class = 'red'> element. Firefox calls this search method key selector (keyword query). The so-called keyword is the last (rightmost) rule in the style rule, and the above key is span. Red.

Simple and efficient CSS

The so-called efficient CSS allows the browser to perform as few searches as possible when looking for elements matching the style. The following lists some of our common low-efficiency mistakes in CSS writing:

◆ Do not use the tag name before the ID Selector

General Syntax: div # divbox

Better Syntax: # divbox

Explanation: Because the ID selector is unique, adding a div increases unnecessary matching.

◆ Do not use the label name before the class selector

General Syntax: Span. Red

Better Syntax:. Red

Explanation: it is the same as the first one. If you have defined multiple. Red elements with different styles, you cannot remove them. For example, your CSS file is defined as follows:

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

If it is defined in this way, do not remove it. After it is removed, it will be confused. However, it is recommended that you do not write it like this.

◆ Use as few hierarchical relationships as possible

General Syntax: # divbox P. Red {color: red ;}

Better Syntax:. Red {..}

◆ Use class to replace hierarchical relationships

General Syntax: # divbox ul Li a {display: block ;}

Better Syntax:. Block {display: block ;}