CSS优先级

最新推荐文章于 2025-12-02 22:03:53 发布

原创最新推荐文章于 2025-12-02 22:03:53 发布 · 92 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

我的笔记专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS样式优先级的规则，包括导入方式、选择器权重和权值计算。内容涵盖内联样式、ID选择器、类选择器和标签选择器的优先级，并通过实例展示了它们的组合使用。同时，解释了`!important`的优先级以及继承的权值。通过对这些概念的理解，读者能够更好地控制和调试CSS样式表。

CSS优先级

1、导入方式的优先级

内联式 > 嵌入式 > 外部式
说明：嵌入式放外部式的后面时才是如此，比如：

<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>

2、选择器的优先级

选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>css3选择器优先级</title>
    <style type="text/css">
        #my_id {
            color: #0000ff;
        }
        .my_class {
            color: #00ff00;
        }
        div {
            color: #ff0000;
        }
        * {
            color: #30033;
        }
    </style>
</head>

<body>
    <div id="my_id" class="my_class" style="color:#cccccc">
        我是一个div
    </div>
</body>

</html>

3、权值

权值规则标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

#a .b p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

最高权值!import

p{color:purple!important;}

!important位于属性值之后，";"之前。