CSS selector, priority and matching principle, css Selector

CSS selector, priority and matching principle, css Selector

Polaris is not a front-end developer. However, as a Web developer, it is also important to master necessary front-end technologies. To be honest, polaris is still very interested in front-end technology, but he has never learned it systematically, so he knows a little complicated. This article is a summary of polaris's use of some knowledge on the Internet in combination with his own problems. It serves as a note, and I hope it will be helpful to beginners.

Today, when I modified my blog, I encountered a problem: I added a class to a p tag, but some attributes of this class didn't work after execution. You can view the Firebug and find that the properties that do not work are overwritten (haha, nonsense, otherwise it will not work ). At this time, I suddenly realized the priority problem of the CSS selector. I didn't pay attention to it before and it was very casual to use. This time, we will summarize the CSS selector and priority slightly.

1 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, these methods are combined, so there are five or six selectors.

1.1 three basic selector types

Syntax:

☆Tag name selector, for example, p {}, that is, the HTML Tag is 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.

1.2 extension Selector

Syntax;

☆Descendant selector, such as. polaris span img {}. The descendant selector uses multiple selectors and spaces to find 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, saves a lot of code.

2 selector priority

After learning about various selectors, another important point is the priority of CSS selectors. This is why polaris has a problem at the beginning of the article.

A simple example:
The following tag nesting exists in the HTML document.

<div class="polaris"><span class="beijixing">beijixing</span><span>polaris</span></div>

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

. Polaris span {color: red ;}

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

. 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:

Div. test1. span var Priority 1 + 10 + 10 + 1
Span # xxx. songs li Priority 1 + 100 + 10 + 1
# 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:

<Div> <style> DIV # divBox p span. red {color: red;}> <style> <body> <div id = "divBox"> <p> <span> s1 </span> </p> <span> s2 </span> </p> <span> s3 </span> </p> <span class = 'red'> s4 </span> </p> </div> </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.

4. simple and efficient CSS

The following is from "Understanding the CSS search and matching principles to make CSS more concise and efficient".

The so-called efficient CSS allows the browser to perform as few searches as possible when searching for elements matching the style, the following lists some of our common mistakes in CSS writing (which I used to make ):

4.1 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.

4.2 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:
P. red {color: red ;}
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.

4.3 Use as few hierarchical relationships as possible

General Syntax: # divBox p. red {color: red ;}
Better Syntax:. red {..}

4.4 use class instead of hierarchical relationship

General Syntax: # divBox ul li a {display: block ;}
Better Syntax:. block {display: block ;}