Detailed CSS selector, priority and matching principle

The five most common types of CSS selectors

Accurate and concise use of CSS selectors will achieve very good results. We don't have to define the class or ID for each element throughout, and with the right organization, you can do the same thing in the simplest way possible. In the actual work, the most commonly used selectors have the following five categories:

First, Tag selector:

As implies, Tag Selector is a direct HTML tag as a CSS selector, can be p, H1, DL, strong and other HTML tags. Such as:

P {font:12px;}   em{color:blue;}   dl{float:left;  Margin-top:10px;}  

Second, ID selector:

We usually define the ID for the page element. For example, define a layer

1. #menubar {  margin:0auto;   background:#ccc;   color:#c00;  }   

where "menubar" is your own definition of the ID name. Note the "#" number in front.
The ID selector also supports descendant selectors, for example: #menubarp {text-align:center;line-height:20px;;} This method is primarily used to define layers and elements that are more complex and have multiple "unique descendants".

Three, class selector:

The class selector definition is represented in CSS using a dot, for example:

1. . da1 {  color:#f60;   font-size:14px;  }  

In the page, with class= "category name" method call:

Four, group selector:

When several element style attributes are the same, a declaration can be called together, and the elements are separated by commas, which is the group selector in the CSS selector. Such as:

1. P,td,li {  line-height:20px;   color:#c00;  }   #mainp, #siderspan{  color:#000;   Line-height:26px;  }   . www_52css_com, #mainpspan{  color:#f60;  }   . text1h1, #siderh3,. art_titleh2{  font-weight:+;  }  

Using the group selector will greatly reduce the CSS code, will have multiple elements of the same attributes, merging groups to select, define the same CSS properties, which greatly improve the efficiency of coding and CSS file volume.

V. Descendant selector:

The descendant selector in the CSS selector is also called a derived selector. You can use the descendant selector to define a style for child elements in an element, such as this:

1. Listrong{Font-style:Italic;Font-weight: -;Color:#f00; }#mainp{Color:#000;Line-height:26px; }#sider. Conspan{Color:#000;Line-height:26px; }. Www_52css_compspan{Color:#f60; }#siderulli. Subnav1{Margin-top:5px; }

The first paragraph is to define an italic bold and set broken style for the strong sub-element below Li. others and so on.
The use of descendant selectors is very beneficial, and if the HTML elements included within the parent element are unique, you do not have to assign class or ID to the inner element, and you can apply the selector directly, such as the following H3 and UL do not have to specify class or ID.

Here the CSS can be written and like:

1. #siderh3 {...}   #siderul{...}   #siderulli{...

Combined with the above four CSS selectors, basically meet the needs of the CSS layout, mainly in the use of flexible, especially the use of descendant selectors can greatly simplify the HTML document, so that the HTML structure is clear, the smallest code to achieve the same effect.

Priority and matching principle

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:

1. <div class= "Polaris" > <span class= "beijixing" > Beijixing  </span> <span> Polaris  

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

1. {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. {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  span#xxx. Songs Li priority 1+100 + 10 + 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:

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:

1. <style> Div#divbox P span.red {color:red;}  

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;}   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;} better notation:. Red {..}

Use class instead of hierarchical relationships

General wording: #divBox ul Li a {Display:block;} better notation:. Block {Display:block;}

Tips for using ID selectors

ID is used to identify the unique element of a page, the name of the ID is a means of controlling a block of content, by placing a content block into a div and giving a unique ID, you can use CSS selectors to precisely define the appearance of each page element, including title, list, picture, link or paragraph, and so on. For example, if you write a CSS rule for #header, it can be completely different from the picture rules in #content.

You can define the link styles in different content blocks by different rules. Similar to this: #nav a:link or #main a:link or #footer a:link. You can also define different styles for the same elements in various content blocks. For example, the styles of #main p and #sider p are defined by #main p and #sider p respectively. Structurally, your pages are made up of pictures, links, lists, paragraphs, and so on, and these elements themselves do not have an impact on what network devices are displayed (PDAs or mobile phones or internet TVs), and they can be defined as any appearance of the presentation.

A carefully structured HTML page is very simple, and each element is used for structural purposes. When you want to indent a paragraph, you do not need to use the blockquote tag, as long as you use the P tag, and the P plus a CSS text-indent rules can be used for indentation purposes. P is a structured label, Text-indent is a performance attribute, the former belongs to HTML, the latter belongs to CSS. (This is the legend of the structure and performance of the separation)

A well-structured HTML page has almost no label that behaves as a property. The code is very clean and concise. For example, the original code can now be written in HTML only, and everything that controls performance is written to the CSS, and in structured HTML, table is the table, not anything else (not to be used for layout and positioning).

Of course, CSS selectors are not just that simple, except for the ID and class as well as descendant selectors, property selectors, and so on.

Detailed CSS selector, priority and matching principle