Css选择器优先级

问题

写Css实例过程中发现一个小问题
html代码如下

<div class="container">
        <a class="active" href="#">主页</a>
        <a href="#">新闻</a>
        <a href="#">联系方式</a>
        <a href="#">关于我们</a>
    </div>

    <div style="padding-left:16px">
        <h2>顶部导航实例</h2>
        <p>信息内容..</p>
    </div>

Css部分代码

.container a:hover{
    background-color: #ddd;  //灰色
    color: black;
}
.container a.active{
    background-color: #4CAF50;  //绿色
    color: white;
}

页面如图

当鼠标悬浮到四个a标签时，应该变为灰色，但是悬浮在绿色a标签时不变色，发现是选择器优先级问题。

Css优先级

Css优先级可以分为六个等级，由0到5

0级

通配选择器、选择符和逻辑组合伪类

*
+ > ~
:not() 

1级

标签选择器的优先级是 1

body{}

2级

类选择器、属性选择器和伪类

.container
[text]
:hover

3级

ID 选择器

#id

4级

内联样式

<div style="padding-left:16px"></div>

5级

!important

计算规则

每一个选择器都对应一个具体的数值，数值越大优先级越高， CSS 语句优先渲染。如果数值相同则靠后的渲染。
出现一个 0 级选择器，优先级数值+0
出现一个 1 级选择器，优先级数值+1
出现一个 2 级选择器，优先级数值+10
以此类推

问题原因

如问题部分
Css代码

.container a:hover{
    background-color: #ddd;
    color: black;
}
.container a.active{
    background-color: #4CAF50;
    color: white;
}

hover部分选择器为一个类加一个伪类
active下部分选择器为两个类
优先级数值相同
active部分靠后
active部分渲染
所以悬浮不会变为灰色