CSS样式优先级

最近发现基础知识各种不扎实（鄙视一下自己
昨天去牛客网上刷了几十道题目，连最基础的CSS知识都记不清了，啧
所以以后每次遇到掌握不扎实的知识都要马上记下来，以免自己忘掉。

昨天在牛客网上做错的题目是这一道：

下面span标签中Hello World字体的颜色是：（）

<style type="text/css">     span {        color: green;     }     .red {        color: red;     }    #blue {        color: blue;     } </style><span id="blue" class="red" style="color:black;">Hello World</span>

傻逼如我最后答案写了blue。
我的想法：id的级别应该比class高，所以应该是蓝色的【这很简答嘛哈哈哈哈哈】然后看了答案就被打脸了。
在这道题目里考查的点是：

在相同权值的情况下，离被设置元素越近优先级别越高即就近原则
内联样式（标签内部）> 内部样式（文件头style）> 外部样式（外部文件中）。

需要注意的是，如果外部样式的引用在内部样式之后，那么外部样式将会覆盖内部样式。

所以在这道题目中，内联样式即style="color:black;"的级别是最高的，span显示为黑色。

而对于权值不同的情况下，浏览器会选择权值高的样式。
规则如下：

内联样式style=“”：1000
id选择器：100
类选择器：10
元素选择器：1

例子如下：

p{color:red;} /*标签，权值为1*/p span{color:green;} /*两个标签，权值为1+1=2*/p>span{color:purple;}/*权值与上面的相同，因此采取就近原则*/      .warning{color:white;} /*类选择符，权值为10*/       p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/  

然而在某些特定情况我们需要将某些样式设置为具有最高权值，这时使用!important来解决：

p{    color:red!important;        /*!important要写在分号前     color:black;}

此时段落的颜色为红色，因为红色的权值最高。