CSS 中样式覆盖优先顺序

最新推荐文章于 2024-06-16 17:29:19 发布

PeakXin

最新推荐文章于 2024-06-16 17:29:19 发布

阅读量8.7k

点赞数

分类专栏： HTML & CSS

本文链接：https://blog.csdn.net/xinyflove/article/details/51647701

版权

HTML & CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

我们在日常开发，总会遇到样式覆盖问题。有时候修改后的样式，并没有根据自己的意愿显示出来。这里就可能跟样式覆盖优先顺序有关。

1、首先，层叠优先级是
内联样式 > 内部样式表 > 外部样式表
下面以具体实例说明
代码:
test.html文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>层叠优先级</title>
    <link rel="stylesheet" href="test.css">
    <style type="text/css">
        p {
            color: green;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <p style="color: red">这是一段文字</p>
</body>
</html>

test.css文件

p {
    color: blue;
    font-size: 18px;
    background-color: yellow;
}

运行结果
这里写图片描述
这个结果很容易看到，外部样式表样式 的字体颜色和大小被内部样式表 的字体颜色和大小覆盖了， 内部样式表 的字体颜色被 内联样式 覆盖掉了。

2、选择器优先级

id选择器 > class选择器 > 标签选择器
code:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>层叠优先级</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <p class="pct" id="pit">
        id选择器 > class选择器 > 标签选择器
    </p>
</body>
</html>

p {
    color: blue;
    font-size: 24px;
    background-color: yellow;
}
.pct {
    color: green;
    background-color: pink;
}
#pit {
    color: red;
}