CSS优先级是如何工作的？

Question

假设我有以下HTML代码：

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

如果 #id1、.class1 和 .class2 都有不同的互斥 CSS 规则集，哪个会胜出？我已经测试了一个例子，在某些情况下它选择（我认为）在 CSS 文件底部列出的那个，但在另一种情况下似乎是不确定的。

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

- leora

---

https://developer.mozilla.org/en-US/docs/CSS/Specificity - Matt Ball

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

然后，您的元素将具有红色文本且没有装饰，因为：

- 在`#id1`中的`color`值覆盖了两个类中的值，并且 - 在`.class2`中的`text-decoration`值覆盖了`.class1`中的值。

请记住，所有这些都必须应用于同一元素。如果父级只有一个ID，其子级只有一个类，则不会应用任何内容，因为您正在处理完全不同的元素。代替的是继承，这也在我上面链接的文档中提到。 jsFiddle预览

- BoltClock

Answer 2

CSS 从上到下读取，所以 class2 会胜出！

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

- Axel A. García

---

那么ID不会胜过类吗？ - leora

不一定，这取决于你在哪里定义了class2。如果它在css中位于class1之上，那么它将输给class1。 - PSL

好的，ID 胜出。虽然你在问类... :P 它是这样的：STYLE 属性 > ID > CLASS > TAG（在 CSS 中）。 - Axel A. García

Answer 3

ID 优先于 class。

如果一个元素使用 ID 定义了多次相同的样式，后面的将优先于前面的，除非你使用 !important。

---

CSS 的优先级顺序如下：

1. !important

2. 在 HTML 元素内部定义的内联样式

3. 在 head 部分定义的内部样式

4. 外部样式表，它是指向样式表的链接 (<link rel="stylesheet" type="text/css" href="style.css" />)

5. 浏览器默认样式

- Eli

Answer 4

这很简单 - 更接近和更精细的那个赢了（就像生活一样）

也就是说：

如果有一个空白的表格，那么：

首先用类别开始 - 应用那些（即 class1、class2）

但你知道关于那个个体的信息（id）

然后应用它..

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

除非标签在其属性中有 style - 那将获胜

- Ed Heal