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

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

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

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

jsFiddle preview

请记住，所有这些都必须应用于同一元素。如果您的 parent 只有一个 ID，而 child 只有一个类，那么这些都不适用，因为您正在处理完全独立的元素。相反，发挥作用的是继承，我在上面链接的文档中也介绍了这一点。