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

Question

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

.foo {
    margin-right: 10px;
}


.bar {
    margin-right: 0px;
}

哪个类将具有特异性？边距是 10px 还是 0px？

Answer 1

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

在这种情况下， CASE 1

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

class = 'red blue' 将是blue。

CASE 2

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

在本例中，class = 'blue red' 将是red。

工作示例

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
}

Answer 3

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

HTML：

    
你好世界！

使用以下 CSS：

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

注意到内部 div 仍然有 25px 的左边距吗？

另外，在提供值后阅读“!important”参数：

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

查看

Answer 4

单个类名具有相同的权重。在这种情况下，第一个列出的规则将被第二个规则覆盖，因此，该元素将具有 margin-right: 0px;

这是一个 简单示例使用颜色而不是边距，因为它更容易可视化。 bar 中指定的值将由浏览器选择。