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

【问题标题】：Using multiple classes in one element and specificity在一个元素和特异性中使用多个类
【发布时间】：2011-12-09 20:48:35
【问题描述】：

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

.foo {
    margin-right: 10px;
}


.bar {
    margin-right: 0px;
}

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

【问题讨论】：

@Rionmonster 有一个很好的答案。但有关其他信息，您可能需要阅读此内容。 3nhanced.com/css/battle-of-the-selectors-specificity

标签： css css-specificity

【解决方案1】：

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

案例 1

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

class = 'foo bar' 在这种情况下会是蓝色。

案例 2

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

class = 'foo bar' 在这种情况下会是红色。

Working Example

【讨论】：

非常感谢。我想我明白了，但是既然你将你的类命名为红色和蓝色而不是 foo 和 bar，这有点令人困惑，哈哈
恒星答案；这是另一个从你的小提琴分叉出来的另一个例子 jsfiddle.net/ccatto/KZdJK/107 显示 CSS 优先顺序示例

【解决方案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
}

【讨论】：

【解决方案3】：

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

这是一个 simple example 使用 color 代替边距，因为它更容易可视化。 bar 中指定的值将由浏览器选择。

【讨论】：

【解决方案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 }

看看

【讨论】：

是的.....已经知道更“具体”的东西之间的特异性，只是不确定使用两个不再具体的类。
所有类都同样具体。正是两个类选择器的组合使得.foo .bar 比单独的.bar 更具体。