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

Source: Internet
Author: User

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;} /* All H objects with the Title property */
Span[class=demo] {color:red;}
div[speed= "Fast"][dorun= "no"] {color:red;}
a[rel~= "Copyright"] {color:black;}


Include selector E1 E2 {srules}
Table td {FONT-SIZE:14PX;}


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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.