组合选择器与权重计算
组合选择器
-
后代选择器 div p (选择所有后代p，与子元素选择器不同，子元素选择器只选择儿子一代)
-
并集选择器 div,p
-
交集选择器 div.d1
-
子元素选择器 div > p
-
序列选择器ul li:first-child 与 ul li:last-child
-
相邻兄弟选择器 div + p
-
普通兄弟选择器 div ~ p (读取html文档由上向下的，所以前面的兄弟不选择)
权重比较
权重案例01
<style type="text/css">
#id1 .class2 div p {
color: red;
}
div #id2 div p{
color: blue;
}
div.class1 div.class2 div p {
color: green;
}
</style>
</head>
<body>
<div id="id1" class="class1">
<div id="id2" class="class2">
<div id="id3" class="class3">
<p>
我是什么颜色？
</p>
</div>
</div>
</div>
显示结果为红色，计算权重第一步，比较id class html的选择器数量，来计算权重大小。
权重案例02
<style type="text/css">
#id2 #id3 p{
color: red;
}
#id1 #id2 p{
color: blue;
}
</style>
</head>
<body>
<div id="id1" class="class1">
<div id="id2" class="class2">
<div id="id3" class="class3">
<p>
我是什么颜色？
</p>
</div>
</div>
</div>
</body>
结果显示为蓝色， 计算权重第二步，如果权重一样，那么后出现的会覆盖前面出现的。
权重案例03
<style type="text/css">
#id1 #id2 #id3{
color: red;
}
.class1 .class2 .class3 {
color:green;
}
p{
color: blue;
}
</style>
</head>
<body>
<div id="id1" class="class1">
<div id="id2" class="class2">
<div id="id3" class="class3">
<p>
我是什么颜色？
</p>
</div>
</div>
</div>
</body>
结果显示为蓝色， 比较权重第三步，看看选择器是否直接选中目标元素，如果没有选择目标元素，则权重为0，
权重案例04
<style type="text/css">
#id2 #id3 {
color: red;
}
#id1 #id2 {
color:green;
}
</style>
</head>
<body>
<div id="id1" class="class1">
<div id="id2" class="class2">
<div id="id3" class="class3">
<p>
我是什么颜色？
</p>
</div>
</div>
</div>
</body>
结果显示为红色，计算权重第四步，如果都没有选中目标元素，那么谁离目标近就听谁的。
示意图
