HTML CSS的优先级是怎样的

在本文中，我们将介绍CSS的优先级，即在HTML中，当不同的CSS规则发生冲突时，如何确定应用哪个规则。

阅读更多：HTML 教程

1. CSS规则的优先级

CSS中的样式规则可以直接在HTML文件中使用内联样式表，也可以在HTML文件中使用嵌入式样式表或外部样式表。当存在多个CSS规则时，浏览器如何决定应用哪个规则？

CSS规则的优先级可以通过以下几种方式进行确定：

内联样式表：在HTML标签内部使用style属性指定的样式被认为是最高优先级的，它将覆盖任何其他样式表中定义的样式。
嵌入式样式表：在HTML文档的head部分使用style标签定义的样式表拥有比外部样式表更高的优先级。嵌入式样式表中定义的样式将覆盖外部样式表的相同样式。
外部样式表：外部样式表是包含在一个独立的CSS文件中，通过link标签在HTML文件中引用。外部样式表中的样式将被应用在所有相应的HTML文件上，除非被内联样式表或嵌入式样式表所覆盖。
默认样式表：浏览器自带的默认样式表是CSS规则中优先级最低的，它定义了基本的HTML元素样式，当其他样式表没有覆盖某些元素样式时，将使用默认样式表中的样式。

当多个规则具有相同的优先级时，最后出现的规则将被应用。例如，如果两条规则都是使用内联样式表定义的，那么在HTML文件中后出现的规则将覆盖前一个规则的样式。

2. CSS规则的特定性

除了优先级之外，CSS还根据特定性来确定应用哪个规则。特定性是基于CSS选择器的数量和类型来判断的。特定性的计算规则如下：

标签选择器（如div、p）的特定性为0。
类别选择器（如.class）的特定性为1。
ID选择器（如#id）的特定性为100。
内联样式表的特定性为1000。

特定性计算时，将选择器中各个类型之间的值相加，其中优先级从左到右，从高到低。例如：如果有两个选择器，一个是”.class”和另一个是”div”，那么特定性值较高的选择器将被应用。

3. 优先级和特定性的示例

下面是一个示例，用于说明CSS的优先级和特定性如何影响样式的应用：

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      color: blue;
    }

    .class {
      color: green;
    }

    #id {
      color: red;
    }
  </style>
</head>
<body>
  <div id="id" class="class" style="color: purple;">
    这是一个示例文本。
  </div>
</body>
</html>

在这个示例中，使用了三种不同的方式来定义div元素的颜色样式。根据优先级和特定性的规则，最终应用的样式将是内联样式表中定义的”color: purple;”，因为内联样式表具有最高的优先级（1000），而

div>元素同时具有类别选择器（.class）和ID选择器（#id）作为特定性。注意，即使在内联样式表中没有指定ID选择器，ID选择器的特定性为100，比其它选择器高。