On the calculation method of CSS weights

Before this, only know the skin of the CSS weight, such as: the weight of the row is higher than the weight of the head, the head than the external style of weight higher .... Work to know really understand the importance of CSS weights. Understand the weights to write out the best CSS selector. It's a great help to learn less,scss back.

From the location where the CSS code is stored, the weight calculation is of course---> inline style > Internal style sheet > external style sheet! However, our CSS code in our work is written in an external style sheet.

Reference to the design of the style selector the weight priority is like this

Important > Inline styles > ID > Classes > tags | Pseudo Class | Property Selection > Pseudo-objects > inheritance > Wildcard characters

There is a method of calculating weights of course it's not official yet.

Important 1 0 0 0

ID 0 0 1 0

Class 0 0 1 0

Tag (tag) 0 0 0 1

Pseudo-Class 0 0 1 0

ATT attribute 0 0 1 0

Pseudo-Object 0 0 0 1

Wildcard characters 0 0 0 0　

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,. Polaris span {color:red;} The selector priority is 10 + 1 which is 11; the priority of the. Polaris is 10;

Div.test1. span var priority 1+10 +10 +1

Span#xxx. Songs Li priority 1+100 + 10 + 1

#xxx-li Priority 100 +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.

Selector type

Strictly speaking, CSS selector classification can only be divided into three kinds, tag name, class selector, ID selector. Of course, this is the design at the beginning of the design. After the selector is due to special needs to add, at the time I learned that these selectors are enough!

Tag Selector: p{}

Class selection:. container{}

ID: selector #logo {}

Of course, the ID selector in a page you can only have one, a number of words of course will not error, after all, CSS is not a programming language! But the background developers often use the ID, if unfortunately his naming rules and you define the same, then this error is not good to find out.

Extended selector:

Descendant selector: p span a{}; The descendant choice is to add a space after the last selector and then write the selector. There are fewer tags to match. Of course the weight will be higher!

Group selector: p,div,img{}; The group selector separates multiple selectors with a comma when multiple tags require the same style. This will save a lot of code.

Here's a look at the selector in CSS2,CSS3

Introduction to selectors in CSS1&2
CSS3 New Selector Introduction
CSS3 Property Selector
CSS3 structure Pseudo-class selector
Css3ui element state Pseudo class Selector
CSS3 other New selectors

CSS1&2 element Selector
Element Selector
* Universal Selector
E element Selector
E#id Id Selector
E.class class Selector
Relationship Selector
E F contains the F element contained in the selector e element.
E>f Sub-selector Select child element F of element E
E+f adjacent selector e element after F element
Pseudo class Selector
E:link Link pseudo-class is not accessed before style
E:visited in a style that has been visited
E:hover styles when hovering over a mouse
E:active between mouse clicks and releases
E:focus element becomes input focus
E:lang matching e elements using special language
Property Selector
E[att] Select the e element with the ATT attribute
E[att= "Val"] Select the e element with the ATT attribute and the attribute value Val
E[att~= "Val"] Select a list of words with the ATT attribute with a space-delimited attribute value, one of which equals the e element of Val
E[att|= "Val"] has the ATT attribute and the element value is the e element that begins with Val and uses a connector-delimited string
Pseudo-Object selectors
E:first-letter sets the style of the first character within the object.
E:first-line to set the style of the first row within an object
E:before sets what happens before an object and is used in conjunction with the Content property
E:after sets what happens after the object and is used with the content property.

CSS3 New Selector 44
E F contains selectors
E>f Sub Selector
E+f adjacent Selector
E~f Brother Selector


P~p{color: #f00} selected the P element after the first p. (Only the brothers behind it can be selected)

Structure pseudo-Class selector
E:roote the root element of the document
E:first-child the first child element of a parent element E
E:last-child the last child element of the parent element E
E:only-child only one child element of the parent element E
E:nth-child (n) the nth child element e of the parent element
E:nth-last-child (n) The parent countdown nth Sub-element
E:first-of-type the first sibling element in its class E
E:last-of-type the last sibling element of the same type, E.
E:only-of-type the only sibling element in its class E
E:nth-of-type (n) the nth sibling element e in the same type.
E:nth-last-of-type (n) matches the reciprocal nth sibling of siblings in the same class E
E:empty does not have any child elements that include the text node of element E.

p:first-child{} interpretation, first find the P element, then find his parent node, from the parent node to find the first element is the node of P.
p:last-child{} and p:first-child{} almost
Li:nth-child (2) {} Select the specified ordinal. Find the Li parent element ul, find the second sub-element ul is Li, is selected.
Li:nth-child (even) {}/*even selected even, odd selected odd */
Li:nth-child (3n+1) {}/* custom sequence type (positive order) */
Li:nth-last-child () {}/* is the reverse of nth-child () */

p:first-of-type{} found the first element that is a P tag.
The above label can be divided into child series and Of-type
e:root{} uses only one,
html:root{}, no other tags are used. I only saw this selector in the bootstrap! Maybe it's really useful.

Concise, efficient CSS so-called efficient CSS is to let the browser find a style matching elements to try to do less search, listed below some of our common write CSS to make some inefficient error: Do not use the tag name in front of the ID selector general wording: Div#divbox better writing: # Divbox Explanation: Because the ID selector is unique, adding a div instead adds an unnecessary match. Do not use the label name before the class selector general wording: span.red better writing:. Red explanation: The same as the first, but if you define multiple. Red, and under different elements are not the same style, you can not remove, such as your CSS file is defined as follows: P.red{color:      Red;} Span.red{color: #ff00ff} If this definition is not removed, it will be confused when removed, but it is best not to write this way as little as possible using hierarchical relationships generally: #divBox p. red{color:red;} better:. red{. Use class instead of hierarchical relationships general wording: #divBox ul Li A{display:block;} better written:. Block{display:block;}

　　

On the calculation method of CSS weights