CSS优先级（5种样式覆盖发生的冲突）
我们在使用CSS时，会出现样式覆盖的问题每当样式的覆盖发生冲突时，一优先级高的为准。 对于样式覆盖发生的冲突，常见的共有以下5种情况。
-
引用方式冲突 继承方式冲突 指定样式冲突 继承样式和指定样式冲突 ！important
1、引用方式冲突
css有三种常用的引用方式，分别是外部样式、内部样式和行内样式。 这3种引入方式的优先级如下： 行内样式>(内部样式=外部样式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css" type="text/css">
<style type="text/css">
div{
color: red;}
</style>
</head>
<body>
<div style="color: hotpink;">Hello everyone</div>
</body>
</html>
由此列子，可以证明上方的优先级结论。
2、继承方式冲突
继承方式冲突涉及到CSS的两大特性种的继承性，可参考https://blog..net/weixin_47124862/article/details/110197292 如果时邮局继承方式是引起的冲突，则“最近的祖先元素”获胜。
<!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 type="text/css">
body{
color: blue;}
#gf{
color: red;}
#f{
color: hotpink;}
</style>
</head>
<body>
<div id="gf">
<div id="f">
<div id="son">Hello everyone</div>
</div>
</div>
</body>
</html>
由于继承方式引起了冲突，因此最近的祖先元素获得优先权
3、指定样式冲突
指定样式指的是指定的当前样式，当指定样式发生冲突的时候，权重高的样式获胜。 各种选择器的权重如下表：
常见的伪元素有：::before、::after、::first-letter和::first-line。 常见的伪类有：hover、:first-child 常用的选择器优先级如下： 行内样式>id选择器>class选择器>元素选择器 举例
<!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 type="text/css">
#t{
color: red;}
.t{
color: blue;}
div{
color: #888888;}
</style>
</head>
<body>
<div id="t" class="t">Hello everybody</div>
</body>
</html>
id的选择器权重最高，因此div元素color属性的最终值为red
4、继承样式和指定样式
当继承样式和指定样式发生冲突时，指定样式优先。
<!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 type="text/css">
body{
color: purple;}
#t{
color: red;}
#t .f{
color: hotpink;}
span{
color: black;};
strong{
color: green;}
</style>
</head>
<body>
<div id="t">
<p class="f">
<span><strong>Hello everybody</strong></span>
</p>
</div>
</body>
</html>
5、!important
如果你想要使用某种样式属性，为了其不被覆盖，可以使用!important实现