CSS-优先级与继承

学习目标

• 掌握选择器权重的判断方法

CSS(cascade style sheet)层叠样式表

一个元素的最终样式是由多个来源叠加后的结果

一、样式来源

1. 使用不同的选择器设置的样式
2. 浏览器默认样式 (user agent stylesheet)
3. 继承的样式 (Inherited from xxx)

二、优先级顺序

!important > 内联样式(标签上得style上的属性) > 选择器设置样式 （css文件，style标签）> 浏览器默认样式 > 继承样式

2.1、!important

<div class="box"> 
   <p>饥人谷</p>  
</div>  

<style>  
 p {
         
        color: red!important;
   }  
  .box p {
     
    color: blue;   
 }
  </style

•!important的优先级最高

• 尽量少用!important，除非迫不得已
  • 比如队友写了垃圾代码如内联样式，需要覆盖掉
  • 比如有一些高优先级的代码，只能通过!important来覆盖

2.2、浏览器默认样式

<h1 style=”color: red;”>饥人谷</h1>

<style>
.body {
    
    color: blue;
 }
h1 {
    
    color: green;
 }
</style>

第一个是内联样式
第二个是设置样式
第三个是默认样式
第四个是继承样式

2.3、继承样式

• 对于如下代码ÿ