CSS 18 优先级

示例 1 : 

style标签与外部文件style.css样式重复

外部文件style.css的内容是

.p1{
  color:red;
}
.span1{
  color:blue;
}

同时style标签中也有一个.p1
那么优先使用： 最后出现的一个

<link rel="stylesheet" type="text/css" href="https://how2j.cn/study/style.css" />
 
<style>
.p1{
  color:green;
}
</style>
 
<p class="p1">p1 颜色是绿色，优先使用靠的最后出现的</p>

 

 

示例 2 : 

style标签上的与style属性冲突

style标签上的与style属性冲突
优先使用style属性

<style>
.p1{
  color:green;
}
</style>
 
<p class="p1" style="color:red">p1 颜色是红色，优先使用style属性</p>

 

 示例 3 : 

!important

如果样式上增加了!important，则优先级最高，甚至高于style属性

<style>
.p1{
  color:green !important;
}
 
</style>
 
<p class="p1" style="color:red">p1 颜色是绿色，优先使用!important样式</p>