它基于CSS中的优先级工作。因此，最近出现的项目将覆盖任何以前的样式。

案例一

.red  { background : red; }
.blue  { background : blue; }

class = 'red blue'在本例中为blue。

案例二

.blue  { background : blue; }
.red  { background : red; }

class = 'blue red'在这个例子中应该是红色。

Working Example

另外，如果你想定位一个只有两个类的元素，你可以使用下面的语法：

<ul>
  <li class="foo first">Something</li>
  <li class="foo">Somthing else</li>
  <li class="foo">Something more</li>
</ul>

.foo {
  color: red;
}
.foo.first {
  color: blue
}

一个类名称具有相同的权重。在这种情况下，第一个列出的规则将被第二个列出的规则覆盖，因此，元素将具有margin-right: 0px;
下面是一个simple example，使用color代替margin，因为它更容易可视化。在bar中指定的值将由浏览器选择。

此外，更“具体”的类将覆盖更通用的类：
HTML：

<div class="foo">
    <div class="bar">Hello World!</div>
</div>

使用以下CSS：

.foo .bar { margin-left:25px }
.bar { margin-left:0px }

注意到内部的div仍然有25 px的左边距吗？
也读起来了”！在提供值之后的“重要”参数：

.bar { margin-left:0px!important }

结账