Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

简单化规则原理 浅谈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>
  可以得到如下表格
id选择器的个数类选择器的个数标签选择器的个数位置选择器
1101#a .c {color:red;}
0202.a .c {color:orange;}
0213.a .b li {color:yellow;}
0214.a ul .c {color:green;}
0125div ul .c {color:cyan;}
0216div .b .c {color:blue;}
1027div ul #c {color:purple;}
  应用上面给出的排序规则,可得
id选择器的个数类选择器的个数标签选择器的个数位置选择器
1101#a .c {color:red;}
1027div ul #c {color:purple;}
0216div .b .c {color:blue;}
0214.a ul .c {color:green;}
0213.a .b li {color:yellow;}
0202.a .c {color:orange;}
0125div ul .c {color:cyan;}
  表格的第一行就是优先级最高的样式了。
  好,就说这么多,有什么疑问最好到提问模块去问,下课。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^