级联

为何存在

级联算法就是当样式冲突的时候，通过这个算法，来输出唯一一个优先度高的样式

组成部分

• 来源于重要性（Origin and Inportance）：样式的“出身”，优先级从高到低顺序为：

  • 开发者样式 (Author Stylesheets): 你作为网站开发者写的样式。
  • 用户样式 (User Stylesheets): 用户为自己浏览器设置的样式。
  • 浏览器默认样式 (User-Agent Stylesheets): 浏览器自带的默认样式。
  • !important 标记: 这个标记可以“颠覆”上述天生的优先级。一个带有 !important 的规则会比任何不带 !important 的规则优先级更高。

• 特殊性（Specificity）：所指的元素越具体，特殊性越高，优先度也越高CSS选择器的权重

  • 内联样式 (如 <div style="...">) - 特殊性最高。
  • ID 选择器 (如 #header)
  • 类选择器、属性选择器、伪类 (如 .button, [type="submit"], :hover)
  • 元素选择器、伪元素 (如 div, ::before) - 特殊性最低。

• 源顺序（Source Order）：上两个比较都相同的时候利用这个规则，即后来居上，后写的优先度更高

运作机制

浏览器严格按照以下三步流程来解决冲突：

1. 第一步：比较“来源与重要性”。

   • 首先看规则是否带有 !important。带有 !important 的开发者样式 > 带有 !important 的用户样式 > 任何不带 !important 的规则。
   • 在不带 !important 的规则中，开发者的样式 > 用户的样式 > 浏览器的默认样式。
   • 在这一步，冲突的规则被分到一个“优先级最高的小组”里，进入下一步比较。

2. 第二步：比较“特殊性”。

   • 在同一个来源小组中，浏览器会计算每个规则选择器的特殊性值。
   • 特殊性值越高的规则胜出。例如，#nav .link (一个ID和一个类) 的特殊性就高于 div .link (一个元素和一个类)。

3. 第三步：比较“源顺序”。

   • 如果在前两步之后，仍然有两条或多条规则打成了平手（来源、重要性和特殊性都完全相同），那么在样式表中最后出现的那条规则胜出。后来者居上。

级联与继承的关系

级联只是负责处理样式冲突，而CSS中的继承是一种属性值的传递机制

“级联”是用来解决多条规则应用在同一个元素上的冲突，而“继承”是在没有任何直接规则应用到该元素上时，提供一个备用值的机制