CSS – 屬性優先順序分析

css屬性優先順序分析

 1 /*標籤#ID >#ID >標籤.class >.class >標籤選擇符 >萬用字元*/
 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代碼：1<div class="parentClass" id="parentId">
2   <span class="childClassFirst childClassSecond" id="childId">我到底有多大呢？</span>
3</div>