层叠和优先级

1.层叠的规则

当样式声名冲突时，层叠会依据三种条件解决冲突

• 样式表的来源：

  ​ 样式时从哪里来的，包括你的样式和浏览器默认样式等。

• 选择器的优先级：

​ 那些选择器笔另一些选择器更重要。

• 源码顺序：

  ​ 样式在样式表里生命的顺序。

2.样式表的来源

特别提醒：自己所写的层叠样式表文件（作者样式表）并不是浏览器唯一使用的样式表。

1. 用户代理样式

   可以理解为浏览器的默认样式，用户代理样式的优先级低于作者样式表（自己书写的层叠样式表）。

   用户代理样式在不同的浏览器上会稍有差异，但时大体上是在做相同的事情。

2. ！important 声名

   样式来源规则有一个例外：标记为 ！important 的声名便会被当作更高的优先级来源。

color:red !important; //此时文字颜色为红色的属性的优先级高于一切样式

• 此时总体的优先级顺序按照由高到低的顺序为：
  • ​ 作者的!important > 作者 > 用户代理

在此处建议读者尽量少使用!important ，如果加了!important，那么其对应的样式优先级会很高，这时再去修改其对应的样式会变得很麻烦！！

3.理解优先级

1. 行内样式（内联样式）

   ​ 如若使用HTML的style属性写样式，那么这个声名只会作用域当前元素。实际上行内元素属于“带作用域的”声名，它会覆盖任何来自样式表或者<style>标签的样式。

2. 选择器优先级

   简单来讲，选择器的优先级由小至大为：

   继承 < 通配符 < 标签选择器 < 类选择器 < id 选择器 < 行内样式表（style） < important (重要的)

   有一个更加标准的方法进行选择器优先级的判断，那就是标记比较法**😄**

   选择器	ID	类	标签	标记
   html body header h1	0	0	4	0,0,4
   body header.box h1	0	1	3	0,1,3
   .box .list	0	2	0	0,2,0
   #title	0	0	0	0,0,0

   ---

   • 核心思想等级判断从左向右，如果某一位数值相同，则判断下一位数值。

     div ul  li   ------> 0,0,3
     .nav ul li   ------> 0,1,2
     a:hover      -----—> 0,1,1
     .nav a       ------> 0,1,1
     #title			------> 1,0,0
     

     由以上代码可得一下结果：

     • 第五行代码权重大于其余四行代码
     • 第一行代码权重最小
     • 第三行代码和第四行代码权重等价

   特别声名：

   1. 权重不会有进位现象！

   2. 如果是复合选择器，则会有权重叠加，需要计算权重。

   • 样式代码示例：

   • #main-nav a {                    //标记为 1,0,1
       color: white;
       background-color: #13a4a4;  
       padding: 5px;
       border-radius: 2px;
       text-decoration: none;
     }
     
     #main-nav .featured {          // 标记为 1,1,0
       background-color: orange;   //此处的背景样式生效！
     }
     

3. 源码顺序

   如果两个声名的来源和优先级相同，那么可以依赖于样式源码顺序来判断样式显示的先后

   .nav a {
     color: white;
     background-color: #13a4a4;  //此处的背景颜色样式被层叠掉，不显示此背景颜色
     padding: 5px;
     border-radius: 2px;
     text-decoration: none;
   }
   
   a.featured {
     background-color: orange; //此处背景样式代码生效
   }
   

   核心思想：后来居上