Web 技术研究所

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

简单化规则原理 浅谈CSS选择器的优先级

  CSS选择器我想大家都会用,简单的优先级规则,比如。ID选择器>类选择器>标签选择器,这样基础的细则很容易就可以记住。但是如果所有的规则都这样去记忆不会很麻烦吗?既然存在这些细则,我们就可以寻找它的共同点,然后找到这些规则是如何被推导出来的。只有找到规则的源头,并把握住他,规则就不再是什么规则,而是理所当然的事情。
  其实稍微分析一下CSS选择器的规则就很容易找到个共同点,那就是“精确优先”这个规则。就是哪个选择器对元素的定位更精确,它就更优先。当然,由于“精确”这个值并不是每条CSS选择器的唯一值,所以还需要一个辅助规则,那就是“居后优先”。居后优先就是,当两个精确度一样的选择器存在时,居后的规则优先级高。这两条规则就是原来一大堆繁琐的CSS选择器规则的源头,或者说,原来的一堆CSS选择器规则就是从这两个规则推导出来的,只是推导出来后它们被分开描述成了新的规则而已。接着,如果你还觉得这两条规则麻烦,那就再把它合并成一条。那就是数据库查询时的排序规则,熟悉数据库查询的都会知道order by这个语句,这是排序用的。你会发现,“精确优先”和“局后优先”这两条规则完全符合数据库查询的order by规则。“局后优先”是以选择器位置排序的,位置肯定是唯一的,那么这个就相当于数据库中的一个唯一字段。而“精确优先”规则不是唯一的,所以就是一个普通字段。综合这些要素,我们可以写出“order by 精确度 desc,位置 desc”,这样一个规则就可以完全描述CSS选择器里的规则了。
  假如有这样一个代码 <style>
a {color:red;}
#a {color:green;}
.a {color:blue;}
.b {color:yellow;}
.c {color:purple;}
</style>
<a class="a b c" id="a">次碳酸钴</a>
  那么就可以得出这样一个表
位置精确度选择器
10a {color:red;}
22#a {color:green;}
31.a {color:blue;}
41.b {color:yellow;}
51.c {color:purple;}
  如果用“order by 精确度 desc,位置 desc”这个排序去查询就会得到下面这个排序
位置精确度选择器
22#a {color:green;}
51.c {color:purple;}
41.b {color:yellow;}
31.a {color:blue;}
10a {color:red;}
  先对精确度倒序,精确度相同的然后再对位置倒序。这样,第一行就是优先级最高的。
  到这里,你会有一个很大的疑问吧。“精确度”谁说了算?是的,如果要死记硬背这些精确度,那就和那些原来的规则没啥区别了。这些精确度实际上是元素属性本身的性质。当你给一个元素添加一个id或者class的时候你有没有想过,这个id和class到底是什么?如果连这个本质都不知道的话学习HTML也永远停留在皮毛阶段。CSS选择器为我们做的已经足够多了,现在我们要从HTML的方向来分析这精确度。
  首先看看id、className、tagName有什么区别吧。现在假设某某地方发生了一起凶杀案,有个目击者看见了凶手。他向警方这样描述“是一个穿着白色衣服的男人杀的。”好了,现在凶手就是我们要寻找的元素。衣服这种可以随便换的东西就叫做className,而性别不能随便换的就叫做tagName。根据这个描述,警方就把目标锁定在了有这个特征了六个人身上。也就是说,根据这个目击者提供线索的精确度,可以找到6个人。现在又又另一个目击者,他声称看到了凶手的脸,并且他认识凶手,他告诉了警方凶手的名字。我们不考虑这个线索的可靠性,他提供了名字这个东西就是id,通常情况下是不会重复的,所以警方确认完这条线索的可靠性以后,瞬间就可以确定凶手。也就是说,第二个目击者提供了名字,比第一个目击者提供的性别和衣服颜色精确度更高。这就是精确度的概念,对于className和tagName的优先级比较也是类似的,你猜中一个人穿白色衣服的概率肯定比你猜中一个人的性别的概率低。因为衣服的颜色有很多种,而性别只有两种。classNmae是描述特征,可以有无限个特征。而tagName是固有性质,他的数量是有限的,就像性别只有两种。当然HTML标签的数量比性别多,但是它始终是有限的。这样看就根本不存在什么规则,一切都是理所当然的,描述一个元素的精确度就是这样。
  这篇文章就先说这么多,还有后代选择器,明天再说吧。

  (对了元芳,刚刚那个案子你去解决吧~)
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^