css中使用'!important'使属性值有最高优先级

本文仅作为工作中的技术归纳和记录！

.myStyle {
    height: 150px;
    width: 100%;
    font-size: 14px;
}

.myStyle {
    font-size: 12px;
    color: #ccc;
}

以上样式定义完成后，若html中的class应用myStyle样式，则font-size: 12px;会得到应用。（别问为什么重复定义，应用已有的样式库文件如：bootstrap.css时难免需要设置相似的自定义样式；多人协作时也无法避免）

浏览器是Firefox，版本号为52.2.1 (64 位)。

若要无论属性定义先后，始终使新定义的属性有最高优先级，即只要调用myStyle，则font-size: 14px始终应用，css中同样可以做到。代码如下：

.myStyle {
    height: 150px;
    width: 100%;
    font-size: 14px !important;
}

属性值中添加 !important ，可以使属性拥有最高优先级，类似于z-index。这样就不用担心文件的加载顺序会影响文件样式了！