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' 红色。

<强> Working Example

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

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

这是simple example使用color而不是保证金，因为它更容易可视化。 bar中指定的值将由浏览器选择。

Answer 4

此外，更多“特定”类将覆盖更通用的类：

HTML：

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

使用以下CSS：

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

注意内部div如何在左边有25px的边距？

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

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

结帐

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

4 个答案: