Detailed CSS selector, 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 are a few examples to illustrate:

Add 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 using CSS selectors

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

Three basic selector types

The syntax is as follows:

The tag name selector, such as: p{}, uses the HTML tag directly as the selector.

Class selector, such as. polaris{}.

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.

Extended Selector

Descendant selectors, 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{}, group selectors are actually a simplified way of writing CSS, but putting together different selectors with the same definition saves a lot of code.

Priority level of selectors

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:

Beijixing polaris

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

.polaris span {color:red;}

At this time, if you want to change the color of .beijixing to blue, you can't use the following command:

.beijixing {color:blue;}

This happens because the latter command has insufficient priority and two conflicting style settings, the browser will only execute the higher priority.

So how is the priority of the selector specified?

In general, the more special a selector, the higher its priority. That is, the more accurate the selector is pointing, the higher its priority. Usually 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 above example, the selector priority of .polaris span {color:red;} is 10 + 1 or 11; the priority of .polaris is 10; the browser will naturally display the red word. After understanding this truth, the following priority calculations are easy:

Div.test1 .span var priority 1+10 +10 +1 span#xxx .songs li priority 1+100 + 10 + 1 #xxx li priority 100 +1

For the case of what selector to use, the principle of using different selectors is: first: accurately select the label to be controlled; second: use the most reasonable priority selector; third: HTML and CSS code as simple as possible Beautiful. usually:

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 the tag name selector combined with the descendant selector .xx li / td / dd {} way to choose.

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

Here I have to mention the use of CSS in the label to write CSS, namely:



Polaris

The priority at this time is the highest. We give it a priority of 1000, which is not recommended, especially for novices. This is also completely contrary to the idea of separation of content and display. The advantages of DIV+CSS can no longer be reflected.

The principle of positioning of descendant selectors

Here is a look at how the browser looks for elements for future generation selectors.

Browser CSS matching does not look from left to right, but from right to left. For example, DIV#divBox p span.red{color:red;}, the search order of the browser is as follows: first find all the span elements of class='red' in html, and then find out if there are p elements in their parent elements. Then determine whether there is a div element with id divBox in the parent element of p, and match if it exists.