CSS-attribute priority analysis

CSS attribute priority analysis

1/* tag # ID >#id> tag. Class>. Class> tag selector> wildcard */
2 body {font-size: 10px ;}
3 Div {font-size: 12px ;}
4 span {font-size: 14px ;}
5. childclassfirst {font-size: 18px ;}
6. childclasssecond {font-size: 20px ;}
7 span. childclassfirst {font-size: 22px ;}
8 span. childclasssecond {font-size: 24px ;}
9 # childid {font-size: 26px ;}
10 span # childid {font-size: 28px ;}
11
12. parentclass {font-size: 30px ;}
13. parentclass. childclassfirst {font-size: 32px ;}
14. parentclass. childclasssecond {font-size: 34px ;}
15. parentclass # childid {font-size: 36px ;}
16 # parentid {font-size: 38px ;}
17 # parentid. childclassfirst {font-size: 40px ;}
18 # parentid. childclasssecond {font-size: 42px ;}
19 # parentid # childid {font-size: 44px ;}
20
21 body. parentclass {font-size: 46px ;}
22 body. parentclass. childclassfirst {font-size: 48px ;}
23 body. parentclass. childclasssecond {font-size: 50px ;}
24 body. parentclass # childid {font-size: 52px ;}
25 body # parentid {font-size: 54px ;}
26 body # parentid. childclassfirst {font-size: 56px ;}
27 body # parentid. childclasssecond {font-size: 58px ;}
28 body # parentid # childid {font-size: 60px ;}
HTML code: 1 <Div class = "parentclass" id = "parentid">
2 <SPAN class = "childclassfirst childclasssecond" id = "childid"> How old am I? </Span>
3 </div>