关于内部样式和外部样式的优先级问题

最新推荐文章于 2024-05-15 22:14:33 发布

原创最新推荐文章于 2024-05-15 22:14:33 发布 · 2.6k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文澄清了一个常见的误解：内部样式和外部样式的优先级并非固定。实际上，它们的优先级取决于定义的先后顺序，最后定义的样式将覆盖先前的样式。通过一个具体的HTML和CSS示例，展示了如何通过调整样式表的加载顺序来改变元素的实际呈现效果。

很多人都会认为内部样式优先级比外部样式高，其实是不对的，内部样式和外部样式是具有相同的优先级的，就看谁出现的位置靠后，谁优先，即最后渲染有效。

如下面的代码，文字肯定要显示成黄色，而不是绿色。因为1.css文件在style样式定义后面引入的。

如果将1.css引入语句放到style标签前边，则会显示成内部样式定义的绿色。

--- 1.css

p{
    font-size: 20px;
    color:yellow;
    background: black;
}

--- 1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        p{
            color:green;
            background:black;
        }
    </style>
   <link rel="stylesheet" href="1.css">
</head>
<body>
    <p>test text!</p>
</body>
</html>