1
<title>第1题</title> <style type="text/css"> #father #son{ color:blue; } #father p.c2{ color:black; } div.c1 p.c2{ color:red; } #father{ color:green !important; /* 继承的权重为0 */ } </style> </head> <body> <div id="father" class="c1"> <p id="son" class="c2"> 试问这行字体是什么颜色的？ </p> </div> </body>
2
<title>第2题</title> <style type="text/css"> #father{ color:red;/* 继承的权重为0 */ } p{ color:blue; } </style> </head> <body> <div id="father"> <p>试问这行字体是什么颜色的？</p> </div> </body>
3
<title>第3题</title> <style type="text/css"> div p{ color:red; } #father{ color:red; } p.c2{ color:blue; } </style> </head> <body> <div id="father" class="c1"> <p class="c2"> 试问这行字体是什么颜色的？ </p> </div> </body>
4
<title>第4题</title> <style type="text/css"> div div{ color:blue; } div{ color:red; } </style> </head> <body> <div> <div> <div> 试问这行字体是什么颜色的？ </div> </div> </div> </body>
5
<title>Document</title> <style type="text/css"> div div div div div div div div div div div div{ color:red; } .me{ color:blue; } </style> </head> <body> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div class="me">试问这行文字是什么颜色的</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body>
6
<title>Document</title> <style type="text/css"> .c1 .c2 div{ color: blue; } div #box3{ color:green; } #box1 div{ color:yellow; } </style> </head> <body> <div id="box1" class="c1"> <div id="box2" class="c2"> <div id="box3" class="c3"> 文字 </div> </div> </div> </body>
答案及解析
前五个都是蓝色，最后一个是黄色
第六题解析：计算权重相同，就近原则
