css优先级问题

最新推荐文章于 2025-08-19 15:33:06 发布

weixin_33862993

最新推荐文章于 2025-08-19 15:33:06 发布

阅读量48

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ilaozhao/p/6556485.html

在HTML文件中引入CSS样式有三种方法：

外部样式：通过link标签引入CSS样式；
内页样式：写在HTML页面里面的style标签里面；
行内样式：写在对应标签的style属性里面。
我知道一般情况下使用外部样式，减少代码冗余，同时便于后期维护。但如果同时用三种方式引入相同的CSS样式，谁的优先级更高呢？

有个简单的计算方法

内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

如下测试：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>css样式优先级</title>
<link href="index.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.box{
background:red;
border:1px solid black;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div style="background:yellow;width:100px;height:100px;" class="box">

</div>
</body>
</html>
外部CSS样式代码：

.box{
width:100px;
height:100px;
background:blue;
}
外部样式：blue
内页样式：red
行内样式：yellow
最后显示的效果是：

把行内CSS的背景样式去掉后，显示：

可见，CSS三种位置写法的优先级是：行内样式＞内页样式＞外部样式