CSS优先级如何工作？

Question

假设我有以下HTML：

<span id="id1" class="class1 class2">This is a test</span>

如果#id1，.class1和.class2都有不同的互斥CSS规则集，哪一个胜出？我一直在测试一个例子，在一个案例中，它选择（我认为）列在CSS文件底部的那个，但在另一个案例中，它似乎是不确定的。

在这种情况下是否有特定的规则？

Answer 1

cascading in CSS的基本原则是您有一个元素，以及一个或多个适用于同一元素的CSS规则（因为该元素与其选择器匹配）。在此过程中，计算所有适用的样式，解决（或级联）任何冲突，然后应用。

如果规则及其声明是相互排斥的，那么它们中没有一个“胜过”任何其他本身，因为没有要解决的冲突，因此无法覆盖。例如，如果您有这些规则：

#id1 {
    color: red;
}

.class1 {
    border-width: 1px;
}

.class2 {
    border-style: dashed;
}

然后你的元素将有一个红色文本和一个1像素厚的虚线红色边框。没有冲突，所以它们都将结合起来。 （请注意，由于special behavior，边框为红色。）

jsFiddle preview

只有当您在多个规则中声明了相同的属性时，选择器特性和级联变得相关，因为那时您需要覆盖该相同属性的值。在那种情况下，那么如前所述，ID优先于类，并且从上到下应用同等特定的规则;阅读selector specificity。

例如，如果您有这些规则：

#id1 {
    color: red;
}

.class1 {
    text-decoration: underline;
    color: green;
}

.class2 {
    text-decoration: none;
    color: blue;
}

然后你的元素将有没有装饰的红色文本，因为

• color中的#id1值会覆盖两个类中的值，

• text-decoration中的.class2值会覆盖.class1中的值。

jsFiddle preview

请记住，所有这些都必须适用于同一个元素。如果您的父母只有一个ID，而且只有一个类，那么这一切都不会适用，因为您处理的是完全独立的元素。更重要的是继承，我在上面链接的文档中也对此进行了介绍。

Answer 2

CSS向上读取，因此class2将获胜！

更多信息 http://css-tricks.com/specifics-on-css-specificity/

Answer 3

ID优先于类。

如果元素使用ID多次定义相同的样式，则后者将优先于前者，除非您正在使用!important

---

CSS的优先顺序如下：

<强> 1 即可。 ！important

<强> 2 即可。在HTML元素中定义的内联样式

第3 即可。头部中定义的内部样式

<强> 4 即可。外部样式表，它是表单（<link rel="stylesheet" type="text/css" href="style.css" />）

的链接

<强> 5 即可。浏览器默认

Answer 4

这很容易 - 更接近，更精致的胜利（就像生活一样）

即

然后得到一张白纸：

从课程开始 - 应用那些（aka class1，class2）

但是你知道那个人（id）

然后申请..

所以（如果有“胜利者”）id赢了

除非标签的属性中包含style，否则将获胜