组合选择器与权重计算

组合选择器

1. 后代选择器 div p (选择所有后代p，与子元素选择器不同，子元素选择器只选择儿子一代)

2. 并集选择器 div,p

3. 交集选择器 div.d1

4. 子元素选择器 div > p

5. 序列选择器ul li:first-child 与 ul li:last-child

6. 相邻兄弟选择器 div + p

7. 普通兄弟选择器 div ~ p (读取html文档由上向下的，所以前面的兄弟不选择)

权重比较

权重案例01

我是什么颜色？

显示结果为红色，计算权重第一步，比较id class html的选择器数量，来计算权重大小。

权重案例02

我是什么颜色？

结果显示为蓝色， 计算权重第二步，如果权重一样，那么后出现的会覆盖前面出现的。

权重案例03

我是什么颜色？

结果显示为蓝色， 比较权重第三步，看看选择器是否直接选中目标元素，如果没有选择目标元素，则权重为0，

权重案例04

我是什么颜色？

结果显示为红色，计算权重第四步，如果都没有选中目标元素，那么谁离目标近就听谁的。

示意图