简单化规则原理 浅谈CSS后代选择器

昨天说了“ 简单化规则原理 浅谈CSS选择器的优先级”，今天说CSS后代选择器的优先级。
　　对于后代选择器，首先有个很重要的问题，它是从右边开始解析的。所以最右边的一个选择器是最重要的。我找个反例抓出来批斗下就明白了。 <style>
.a .c {color:red;}
#a #b {color:green;}
</style>
<div class="a" id="a">
  <ul class="b" id="b">
    <li class="c" id="c">
      次碳酸钴
    </li>
  </ul>
</div>
　　咦，红色？不是说ID选择器是最精确的所以优先级最高吗？是，没错，ID选择器的优先级一直都是最高的，为什么此处被类选择器优先了呢？注意看选择器你会发现选择器最右边选择的元素不同。虽然是ID选择器，但是它选择的是UL这个元素，并没有选择直接包含文本节点的LI元素。而看看类选择器最右边选择的元素是LI这个。既然他们选择的元素都不同，那么它们两个就完全没有可比性。这两个样式都同时生效，因为目标不同，没有谁覆盖谁的说法。如果非要说覆盖了，只能说类选择器把LI从父级继承来的样式覆盖了。继承的样式本来就没有什么优先级，当然可以被任意选择器覆盖。看下面这个代码你就会明白 <style>
.c {color:red;}
#b {color:green;}
</style>
<div class="a" id="a">
  <ul class="b" id="b">
    次碳酸钴
    <li class="c" id="c">
      次碳酸钴
    </li>
  </ul>
</div>
　　这完全就是继承覆盖的问题，不是后代选择器的问题了。接下只来讨论的是最右边的选择器选择的元素相同的情况。后代选择器的优先级判断是用它内部的选择器类型和个数判断的。由于这个比较难用语言描述，我们把它写成规则化的东西吧，这样会比较好理解。 order by
  id选择器的个数 desc,
  类选择器的个数 desc,
  标签选择器的个数 desc,
  位置 desc 　　既然拿出了这个规则，我们就要说说它是从哪里推导出来的。底部的“位置”和普通选择器是一样的，就不必说了，关键是前三个排序。为什么是按他们各自的个数？这是因为这三种选择方式的精确度级别不同，比如标签选择器和类选择器做比较，无限个标签选择器的精确度加起来也不如一个类选择器。就像一条直线，它的长度即使是无限长的，放在二维中计算面积它也是0。而二维中的面，即使它的面积无限大，放到三维中体积也是0。这就是他们的级别不同，上一篇文章是为了简单介绍用了0、1、2，代表了他们的精确度，实际上你可以理解为精确度级别。知道了这些，就很容易得出上面这个排序规则吧？我们举个例子试试。 <style>
#a .c {color:red;}
.a .c {color:orange;}
.a .b li {color:yellow;}
.a ul .c {color:green;}
div ul .c {color:cyan;}
div .b .c {color:blue;}
div ul #c {color:purple;}
</style>
<div class="a" id="a">
  <ul class="b" id="b">
    <li class="c" id="c">
      次碳酸钴
    </li>
  </ul>
</div>