CSS优先级如何工作？

Question

假设我有以下HTML:

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

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

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

Answer 1

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

如果规则及其声明是互斥的,那么它们中的任何一个都不会"赢"任何其他本身,因为没有要解决的冲突,因此无法覆盖.例如,如果您有以下规则:

#id1 {
    color: red;
}

.class1 {
    border-width: 1px;
}

.class2 {
    border-style: dashed;
}

然后你的元素将有一个红色文本和一个1像素厚的虚线红色边框.没有冲突,所以它们都将结合起来.(请注意,由于特殊行为,边框为红色.)

jsFiddle预览

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

例如,如果您有以下规则:

#id1 {
    color: red;
}

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

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

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

• 覆盖两个类中的color值#id1,和

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

jsFiddle预览

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