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

Question

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

.foo {
    margin-right: 10px;
}


.bar {
    margin-right: 0px;
}

哪个班级有特异性？保证金是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'在这种情况下会是红色的.

工作实例

Answer 2

此外,如果您希望定位只包含两个类的元素,则可以使用以下语法:

<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
}