Html CSS优先级是如何工作的？

假设我有以下HTML：

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

这是一个测试

如果

#id1

，

.class1

和

.class2

都有不同的互斥CSS规则集，那么哪一个获胜？我一直在测试一个例子，在一个例子中，它选择（我认为）CSS文件底部列出的那个，但在另一个例子中，它似乎是不确定的

---

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

CSS从上到下读取，因此class2将获胜

更多信息

---

ID将优先于类

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

！重要信息

---

CSS的优先顺序如下：

1！重要的

2。在HTML元素中定义的内联样式

3。在“标题”部分中定义的内部样式

4。指向工作表的链接的外部样式表（

）

5。浏览器默认值

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

如果规则和它们的声明是互斥的，那么它们中的任何一个都不会“赢”于其他任何规则本身，因为没有冲突需要解决，因此也没有什么需要重写的。例如，如果您有以下规则：

#id1{
颜色：红色；
}
.1级{
边框宽度：1px；
}
.2级{
边框样式：虚线；
}

然后，元素将具有红色文本和1像素厚的红色虚线边框。没有冲突，因此所有冲突都将有效地结合起来。（请注意，由于以下原因，边框为红色。）

只有当您在多个规则中声明了相同的属性时，选择器专用性和级联才变得相关，因为这样您就需要覆盖相同属性的值。在这种情况下，如前所述，ID优先于类，并且自上而下应用同样特定的规则；了解

例如，如果您有以下规则：

#id1{
颜色：红色；
}
.1级{
文字装饰：下划线；
颜色：绿色；
}
.2级{
文字装饰：无；
颜色：蓝色；
}

那么您的元素将具有没有装饰的红色文本，因为

• #id1

  中的

  颜色值将覆盖这两个类中的值，并且
  

• .class2

  中的

  文本装饰

  值覆盖

  .class1

  中的值

---

记住，所有这些都必须应用于同一个元素。如果您的父级只有一个ID，而子级只有一个类，那么这些都不适用，因为您处理的是完全独立的元素。取而代之的是继承，我在上面链接的文档中也介绍了这一点。

这很容易——一个更接近、更精致的赢家（就像生活一样）

即

得到了一张空白纸：

从课堂开始-应用那些（又名1级，2级）

但你知道那个人（身份证）

然后应用这个

因此（如果有“赢家”），id赢了

---

除非标记的属性中有

style

，否则这将获胜

，因此Id不会胜过类？这不一定取决于您在何处定义了类2。如果它在css中高于class1，那么它将输给class1。那么ID将获胜。虽然你在问关于课程的事…：它是这样的：样式属性>ID>类>标记（在CSS中）。