html样式显示优先级（权重）

我们先设置一个div，添加id和类名

我们先使用类型选择器（元素选择器）可以看到这个时候的div为红色

接着我们用class对其进行修改，可以看到div变成了蓝色

到这里可以知道 权重：类选择器>元素选择器

接着我们用id对其进行修改，可以看到div变成了黑色

到这里可以知道 权重：id选择器>类选择器>元素选择器

 接着我们用内联样式，可以看到div颜色变成了绿色

到这里可以知道 权重：内联样式>id选择器>类选择器>元素选择器

但是，这里有一个特殊的！

叫做       （！important） 

我们来实验一下，给元素选择器加一个 （！important）可以看到div变为了红色

明明在实验中元素选择器的权重最低，但是加了（！important）之后div确实红色。

!important 的权重是最优先级甚至大过了行内元素

接下来给大家总结一下

假设css中用四位数字表示权重，权重(特殊性)的表达方式如：0，0，0，0

类型选择符（元素选择器）的权重为0001

class选择符(类选择器)的权重为0010  

id选择符的权重为0100

内联样式的权重为1000

伪类选择符的权重为0010     如     :link     :visited......（在此不做实验）

还有一些别的：

子代选择符的权重为0000(逐个对比)
属性选择符的权重为0010
伪元素选择符的权重为0001
继承样式的权重为0000