很多人都知道对某个标签重复写css，会已最后那个css 为有效。
ID>class 大家都知道的了。但是用了包含选择符后，又怎么一回事呢。
那么猜猜下面最终的颜色会是什么？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>css选择符</title>
<style type="text/css">
#wrap #content h5.title{
color:red;
}
#wrap #content .title{
color:aqua;
}
#wrap #content h5{
color:black;
}
#content h5.title{
color:blue;
}
#content .title{
color:fuchsia;
}
#content h5{
color:gray;
}
h5.title{
color:green;
}
.title{
color:lime;
}
h5{
color:maroon;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<h5 class="title">TestTestTestTestTestTest</h5>
</div>
</div>
</body>
</html>
最终发现选择符是按这整个排序比较大小的：
1. 包含选择符+类型选择符+类选择符 #wrap #content h5.title(包含选择符越大越优先)
2. 类型选择符+类选择符 h5.title
3. 类选择符 .title
4. 类型选择符 h5
如有发现错误HY提出..
If you enjoyed this article, please consider sharing it!
