本文探讨了CSS中样式优先级和优先权的概念，通过实例代码展示了内部样式、外部样式和行内样式之间的优先级关系。行内样式具有最高优先级，除非使用`!important`关键字。同时，样式的位置也会影响其优先级，遵循就近原则。在解决样式冲突时，需结合优先级和优先权进行分析。
我们知道css样式有三种形式
1：行内样式；
2：内部样式；
3：外部样式；
那你知道如果对于同一元素的同一属性，上述三个样式都设置了一遍，最后显示的是以谁为准的么？
可能大多数的人都会说：行内样式>内部样式>外部样式；至少以前我是这么认为的；接下来就用代码结合解释详细的描述一下样式的优先级和优先权的不同所带来的不同样式表现。
优先级
一：内部样式和外部样式的优先级
在比较之前，先看这样两段代码：
<!--第一段代码-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式优先级的比较</title>
<style type="text/css">
#s3 {
color: red;
}
</style>
<style type="text/css">
#s3 {
color: blue;
}
</style>
</head>
<body>
<p id="s3">中华人民共和国万岁</p>
</body>
</html>运行结果：此时p标签中的文本显示的颜色是blue
<!--第二段代码-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta 
最低0.47元/天 解锁文章
扫一扫
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
