问题：如下代码所示，'CCCCCCCCCC'行的背景色是red, blue or yellow?
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS test</title>
<!-- <link rel="stylesheet" href="">
<script src="" type="text/javascript"></script> -->
<style>
#outer #inner div { background-color:red; }
.outer .inner #text { background-color:blue; }
div #inner .text { background-color:yellow; }
</style>
</head>
<body>
<div id="outer" class="outer">
AAAAAAAAAA
<div id="inner" class="inner">
BBBBBBBBBB
<div id="text" class="text">CCCCCCCCCC</div>
</div>
</div>
</body>
</html>运行后浏览器效果如下图：
分析如下：
此题考查css选择器的权重计算。其中id选择器权重值为100；类和属性选择器权重为10；标签选择器权重为1；
故#outer #inner div { background-color:red; }总权重为：100+100+1=201；
.outer .inner #text { background-color:blue; }总权重为：10+10+100=120；
div #inner .text { background-color:yellow; }总权重为：1+100+10=111；
三者相比最终红色胜出。