最近在做页面的时候，遇见一个这样的问题。
使用semantic-ui的时候，运用其卡片的ui设计，但是，向其中添加阴影的时候，发现并不生效。下面是我的一段代码:
//此时我定义了该ui类，并且在类名后面写了自己的类名来写属于自己的样式
<div class="ui card cardcontainer">
然后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同一个类里面多个类名叠加，权重比较高。如下面例子：
<div style="width:100px;height:100px;" class="a"></div>
<div style="width:100px;height:100px;" class="b"></div>
<div style="width:100px;height:100px;" class="a b c"></div>
<div style="width:100px;height:100px;" class="b a"></div>
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样式的，哪种样式权值高就使用哪种样式。
