css - 在一个元素中使用多个类和特异性

Question

只是想知道您何时在一个元素上使用多个类，例如 class="foo bar" 并且这些类的设置如下:

.foo {
    margin-right: 10px;
}


.bar {
    margin-right: 0px;
}

哪个类会有特殊性？ margin 是 10px 还是 0px？

Answer 1

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

案例 1

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

class = 'foo bar' 在此实例中为蓝色。

案例 2

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

class = 'foo bar' 在此实例中将是红色。

Working Example