关于css中优先级问题

最近在做页面的时候，遇见一个这样的问题。
使用semantic-ui的时候，运用其卡片的ui设计，但是，向其中添加阴影的时候，发现并不生效。下面是我的一段代码:

//此时我定义了该ui类，并且在类名后面写了自己的类名来写属于自己的样式
 

然后style是以下方式。

.cardcontainer {
    position: absolute;
    left: 700px;
    top: 100px;
    -moz-box-shadow: 2px 2px 10px #909090 ;/*firefox*/
    -webkit-box-shadow: 2px 2px 10px #909090 ;/*safari或chrome*/
    box-shadow:2px 2px 10px #909090 ;/*opera或ie9*/
  }

但是，发现并不生效，在Chrome里面调试结果如下:

semantic.png

cardcontainer.png

发现我在类里面的css并没有生效。于是第一反应是优先级肯定是有问题的。 所以，返回head里面查看的时候，果然发现link的类在semantic之前（如下图）。

css.png

于是将其修改后，在调试，发现竟然还没有变化 。当时由于页面在急，没有多想，直接用!important来强制让css生效。

---

页面做完后，空闲时间想着用!impotant应该不是最好办法，于是又补习了一下css优先级的问题。
网上关于讲解css优先级的博客也许多，可以见此博客。
总结后，发现问题：
css同一个类里面多个类名叠加，权重比较高。如下面例子：

css:

 .a {
  background-color: red;
}
.b {
  background-color: green;
}
.a.b{
  background-color: blue;
}

.b.a{
  background-color: orange;
}

.c {
    background-color: yellow;
}

.a.b.c{
    background-color:yellow;
}

可以发现，色块的颜色分别是:红色，绿色，黄色，橘黄色。

色块

为什么会是这样的颜色呢？

原来如果类中类名叠加在一起的时候，权重比较高。所以.a.b是一个等级，其颜色是蓝色，又由于.b.a(注意其中没有空格)权重与.a.b相等，而css优先级下面的比上面的优先级高的原则，所以呈现出橘黄色
所以权重高的将权重低的覆盖了，这就解释了我们上述的问题。
总结:

• 相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：
  内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

• 权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式。