CSS选择器的权重和计算规则（机制）

从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。

从样式选择器看权重优先级：important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 继承 > 通配符。

CSS权重是由四个数值决定：

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为100。

第三等：代表类、伪类和属性选择器，如.content，：hover，[type="text"]，权值为10。

第四等：代表标签选择器和伪元素选择器，如div p,::before，权值为1。

通配选择符（universal selector）（*）关系选择符（combinators）（+, >, ~, ' ', ||）和 否定伪类（negation pseudo-class）（:not()）对优先级没有影响（但是，在 :not() 内部声明的选择器会影响优先级）。

最后把这些值加起来，再就是当前元素的权重了。

权重算出来了，但是某个元素到底用哪个样式，还有3个规则：

1，如果样式上加有!important标记，那么始终采用这个标记的样式；

2、匹配的内容按照CSS权重排序，权重大的优先；

3，如果权重也一样，按照它在CSS样式表里声明的顺序，后声明的优先。