我在2013年第一次接触过基于Java的web系统，当时就是前后端一起开发的，不分前后端，项目也是一个单体项目，前端代码和后端代码都在同一个项目中，编写好了，统一将webRoot目录下的内容打包成一个war包，放入tomcat的webapps目录下，就完成部署了。视图层就是前端用jsp写的，放在web-info/下一个jsp目录中，mvc框架用的struts，当时我对前端了解不深。
后来再做项目都主要转向了后端了，用springmvc、spring、mybatis、springboot这些技术做后端的开发，前后端完全分离，通过restfulAPI进行交互。前端是一个完整的项目，由前端的小组开发，后端采用分布式微服务，因为分离了，不需要搞前端了，所以对前端知识就慢慢陌生了。
直到2018年我又遇到了那种单体项目，一个整体项目包含了整个软件全部的逻辑，没有搞后端微服务化，这时候，我又不得不重新熟悉前端。
总之，我对前端的认识和学习过程是很曲折，但是曲折的过程中我也慢慢对前端技术达到了非常熟练的地步了，现在至少算是个中级前端的水平了。
最近我对css的选择器、多个规则的优先级等计算又有了新的更深入的理解，我记录一下。
每当又新的理解的时候，总是更新以前的博客文章，是我一个习惯，我希望对一个东西逐步逐步的深入，逐步逐步的精通。
1、CSS级联算法的定义
==================
css级联算法指出了多个CSS规则的优先级。
2、CSS级联算法的具体内容
======================
CSS中三个基础选择器他们的优先级是：id选择器>class>type。
id的比class和type更加具体，因为id是唯一的，所以id选择器的优先级最大，class的优先级其次，type的优先级最后。
虽然，CSS的基础选择器的优先级很好确定，但是，有的选择器是特别复杂的，比如ul#partime-jobs >* li ,这个选择器是ul和id的交集，再取子元素，再取子元素的后代元素中的li元素，这些基础选择器共同构成了一个选择器，那么如何确定这个选择器的优先级呢？这个时候要提到另一个概念：特指度，特指度是由I-C-T三个值组成的，也就是说每一个选择器的特指度确定是由三个分量I-C-T三者来共同确定的。
真实在比较两个选择器的时候：
首先，看importance 重要性大小。会判断两个选择器的重要性：importance，有的规则后面会加上 !important，加上它的规则就是第一种重要的，那么直接应用它就好了。
其次，看origin 规则来源。规则来源一般有三种：（1）浏览器预设（2）user style sheet，用户设置的样式（3）是开发者设置的样式，也就是我们设置的样式。
我们可能会想怎么可能会有用户设置网站的样式呢？不过，现实还真有这样的人，比如我视力不好，我希望看的网站的字号是10em，那我就可以自己设置一下字号样式。
一般，在所有样式都没有加 !important 的时候，预设<用户设置<开发者设置。当都有 !important 的时候，预设>用户设置>开发者设置。之所以给 important这样一个标记是为了强制使用一些规则，或者浏览器强制设置，或者用户强制设置，不允许其他的规则去覆盖它。
一般工作中， important是使用很少的，因为它会破坏样式层叠的规则，就是破坏了规则优先级算法，也会导致一些网页组件的样式不能被覆盖，不能被覆盖，那么就是破坏了组件的可扩展性。所以，!important 标志是不建议使用的。
一般实际工作中，样式的来源只有开发者样式，即使一些第三方库的规则，也算是开发者样式，所以只需要掌握 特指度和出现顺序这两个比较规则，就能够决定样式的优先级了。
第三，看specificity 特指度大小。如果两条规则都没有 !important，或者都有!important，说明他们的重要性一样，并且他们来源都一致的时候，这时，会比较他们的特指度，特指度大的就胜出。
最后，看order 出现顺序。如果两个选择器的特指度是相同的，那么会判断出现的顺序，后出现的会优先。
上面比较规则 重要性和出现顺序都很容易确定，但是特指度的确定有一点困难，下面说明特指度确定的方法。
3、特指度I-C-T的具体含义
=====================
特指度由I-C-T三个分量确定，那么每个分量的值如何确定呢？
I分量的值指的是本选择器中包含的ID选择器的个数。
C分量的值指的是本选择器中class选择器的个数+属性选择器的个数+伪类选择器的个数。
T分量的值指的是本选择器中包含的type选择器的个数+伪元素选择器的个数。
举例子说明确定特指度的方法：
比如 ul#partime-jobs >* li 这个选择器很复杂，如何确定它的特指度呢？
首先，确定 I 分量的值，因为有#partime-jobs，所以I的值是1。
其次，确定 C 分量的值，因为这个选择器中没有class选择器，所以 C 的值是0。
最后，确定 T 分量的值，因为ul * li 三个标签选择器，所以T的值3。
总结一下，ul#partime-jobs >* li这条选择器的特指度是：1-0-3。
4、I-C-T如何比较
==============
确定了两个选择器的I-C-T的值（也就是特指度的值）后，如何确定他们的优先级呢？就是比较特指度，特指度的比较规则是这样的。
首先比较I的值，如果I的值大，那么直接胜出；如果I的值相等，则比较C的值，如果C值大，也胜出；如果连C的值也是相等，那么就比较T的值，谁的T值大谁胜出。
举例子说明：
比如如下一个标签，添加了type选择器、class选择器
<a class="emtext" href="#edu">教育信息</a>
在css文件中：
.emtext {
color: red;
}
a {
color: blue;
}
这两条规则都作用到a元素的文本内容“教育信息”上了，那么如何确定到底应用哪一条规则呢？也就是说，最后的文本颜色到底是红色，还是蓝色呢？
先确定以上两条规则的特指度。
.emtext选择器的I-C-T值是 ： 0-1-0
a标签选择器的I-C-T值是：0-0-1
那么应用哪一个规则，就来比较他们的特指度，按照特指度的比较规则：
.emtext的特指度比a选择器的特指度大，所以就应该应用.emtext的规则，也就是最终“教育信息”这个文本的颜色是红色，而不是蓝色。