CSS 选择器优先级计算

选择器优先级：

　　抄录MDN的原话是：优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

 

选择器分类：

类型选择器：

　　类型选择器包括：标签选择器，例如：h1、p、div等等html标签；伪元素选择器，例如::before、::after、::selection等等为元素。

类选择器：

　　类选择器一般而言我们第一时间肯定会想到class选择器，但是其实类选择器好包括属性选择器（例如，[type="radio"]）和伪类（例如，:hover）。

ID选择器：

　　ID选择器就只有一个ID选择器了。

 

权重计算：

　　假设一个选择器的原始权重是0.0.0.0，从左到右分别代表千位、百位、十位、个位，然后我们把上面所说到的选择器分别放到这个原始权重中去，规定它的权重。

选择器	权重计算，原始值0.0.0.0
类型选择器	0.0.0.1
类选择器	0.0.1.0
ID选择器	0.1.0.0
内联样式	1.0.0.0
!important	+∞ 无穷大

　　这里不再啰嗦内敛样式和important，但是提一下基本的注意事项：

1. 内联样式一般都是在通过JS操作样式表的时候使用的，我们在编写CSS样式的时候基本不会使用到，因为这不利于维护。
2. important 的使用要非常谨慎，尽量不要使用，因为一旦使用了important就意味着获取到了无限的权限，如果一个样式被多个DOM使用，可能会导致多个样式发生改变。
3. 如果权重相同时，根据浏览器的解析，是从上到下解析的，所以是后面的样式将会覆盖前面的样式。