CSS的优先级机制

最新推荐文章于 2025-06-22 10:34:17 发布

原创最新推荐文章于 2025-06-22 10:34:17 发布 · 3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

CSS 专栏收录该内容

2 篇文章

订阅专栏

首先了解下CSS的三种样式类型：外部样式、内部样式以及内联样式。

外部样式：

外部样式与HTML代码分离，单独存放在.css文件中。使用时通过link标签将此文件引入到页面中，引入的格式为：<link type="text/css" rel="stylesheet" href=".css文件的地址"/>

内部样式：

内部样式使用<style>标签将CSS代码包裹起来，并放入<head>标签中(一般存放在head中，也可存放于别处，如body中)，格式为：<style type="text/css"> span{color: red;} </style>

内联样式：

内联样式定义在dom元素的style属性中，格式为：<div style="background-color: red;"> hello </div>

以上三种样式类型的优先级为：

内联样式 > 内部样式 > 外部样式

但这个优先级并不是绝对的，因为还存在着选择器的优先级以及!important一说。下面先介绍下选择器的优先级：

上图所表达的意思为：内联样式style属性的权值为1000，id选择器的权值为100，类、伪类、属性选择器的权值为10，标签选择器的权值为1。(权值越大，优先级越高)

结合选择器的优先级，重新去看上面所提到的三种CSS样式类型的优先级，我们可以对这个优先级排序做如下解释：

1. 内联样式的优先级最高，是因为style标签的权值高。

2. 内部样式的优先级高于外部样式，是因为我们普遍将内部样式定义在外部样式之后。这样对于相同权重的样式，后面的会覆盖掉前面的(也可以理解为越靠近dom元素的样式，优先级相对越高)，所以最终呈现出来的是内部样式的优先级更高。我们下面做个测试，将内部样式定义在外部样式之前，看看效果如何：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<script src="Useful/jq.js"></script>
<style type="text/css">
  #span1{
    color: red;
  }
</style>
<link type="text/css" rel="stylesheet" href="Useful/testPage.css"/>
<!-- testPage.css内容为：#span1{color: yellow;} -->
</head>
<body>
  <span id="span1"> 我是span </span>
</body>
</html>

结果：

很显然，最终显示出来的是外部样式中定义的颜色。这就印证了内部样式和外部样式本身并没有优先级高低之分，最终的优先级是由选择器优先级和顺序所决定的。换一种方式理解：外部样式被link引入进页面后，所呈现出的形式类似于内部样式，他们是平等的。这时候决定最终样式的就是选择器和顺序了。

下面再讲下!important：

从字面意思也可以看出，!important修饰的样式具有最高的优先级，不论是定义在内部、外部还是内联样式中，它的优先级都是最高的。

如果有两处及以上的地方都对同一个元素定义了!important样式，那么最终的优先级还要结合选择器和顺序来决定。举个例子：

#span1{
  color: yellow !important;
}
span{
  color: red !important;
}

两处都使用了!important，但第一个id选择器的优先级高于第二个标签选择器，所以最终的效果为黄色。