What are CSS selectors? What attributes can be inherited? How is the priority algorithm calculated? Inline and important which priority

 

Wildcard selector *{Srules}

Type selector e {srules}
TD {Font-size:14px; width:120px;}

Property Selector
E [attr] {srules}
E [attr = value] {srules}
E [attr ~= value] {srules}
E [attr |= value] {srules}
H[title] {color:blue;}

Sub-object Selector E1 > E2 {srules}
Div Ul>li p {font-size:14px;}

ID selector #ID {srules}

Class selector E.classname {srules}

Selector grouping
E1, E2, E3 {srules}

Pseudo-class and pseudo-object selectors
e:pseudo-classes {Srules}
(pseudo-classes) [: Link:hover:active:visited:focus:first-child:first:left:right:lang]
e:pseudo-elements {Srules}
(pseudo-elements) [: First-letter:first-line:before:after]
The following can be inherited:
Font-size font-family Color
Non-inheritable General:
Border padding margin background-color width height, etc.

About CSS Specificity
The specificity of CSS
Characteristic or extraordinary, it is a measure of the precedence of the CSS value of a standard, since as a standard, there is a set of relevant rules and methods of calculation,
Specificity with a four-bit digital string (CSS2 is three bits) to represent, more like four levels, the value from left to right, the largest on the left, the first level is greater than the level, there is no binary between the levels, the level can not be exceeded.
When multiple selectors are applied to the same element then the specificity value is higher and the final priority is obtained.
Selector specificity Value list:
Rules:
1. The in-line style priority specificity value is 1,0,0,0, which is higher than the external definition. such as: <div style= "color:red" >sjweb</div> external definition refers to the rules defined by <link> or <style> tags;
The 2.!important declaration has the highest specificity value;
3.Specificity values in the same case, in the CSS code in the order in which they appear, the latter CSS style;
4. The continuation of the resulting style has no specificity calculation, it is below all other rules (such as the global selector * defined rules).

Algorithm:
When multiple selectors are encountered at the same time, the specificity value obtained by the selector is added by bit, and {There is no binary between the digits, such as: 0,0,0,5 + 0,0,0,5 =0,0,0,10 instead of 0, 0, 1, 0} to get the final calculated specificity, Then compare the trade-offs with a bitwise comparison of the left-to-right order.

Example Analysis:
1.div {font-size:12px;} Analysis: 1 element {div},specificity value is 0,0,0,1
2.body div P{color:green;} analysis: 3 elements {body div p},specificity value is 0,0,0,3
3.div. sjweb{font-size:12px; Analysis: 1 elements {div},specificity value is 0,0,0,1 1 class Selector {. Sjweb},specificity value is 0,0,1, 0 Final: specificity value is 0,0,1,1
4.Div # sjweb {font-size:12px;} parsing: 1 elements {Div},specificity value is 0,0,0,1 1 class Selector {. Sjweb},specificity value is 0,1,0, 0 final: specificity Value is 0,1,0,1
5.html > Body div [id= "totals"] ul li > P {color:red;} Analysis: 6 elements {html Body div ul li P} specificity value is 0,0,0,6
1 attribute Selectors {[id= "totals"]} specificity Value 0,0,1,0 2 additional selectors {> >} specificity Value 0,0,0,0 final: specificity value is 0,0,1,6
!important has the highest priority

Using!important, you can change the priority to the highest, followed by the style object, then the ID > class >tag, and the style that appears after the sibling style is in the stated order has a high priority.

What are CSS selectors? What attributes can be inherited? How is the priority algorithm calculated? Inline and important which priority