css优先级算法如何计算

CSS优先级的算法主要基于选择器的类型和它们出现的次数。以下是一个详细的计算过程：

一、CSS优先级的组成部分

CSS优先级主要由以下四个部分组成，按照优先级从高到低排列：

内联样式（Inline Styles）：直接在HTML元素上通过style属性设置的样式。

ID选择器（#id）：通过元素的ID属性来选择的样式。

类选择器（.class）、属性选择器（[attribute=value]）和伪类选择器（:hover, :active等）：这些选择器通过元素的类名、属性或伪类状态来选择的样式。

元素选择器（如div, p等）和伪元素选择器（::before, ::after等）：通过HTML元素类型或伪元素来选择的样式。

二、优先级计算规则

每个CSS规则都会根据它所使用的选择器类型被赋予一个优先级值。这个值是一个四位数，每个位数代表上述四个部分中的一个。具体计算规则如下：

 

内联样式：如果规则是内联样式，那么它的优先级值中的第一个数字（即A的值）为1，其余为0，表示为（1,0,0,0）。

ID选择器：每出现一个ID选择器，就在B的值上加1。

类选择器、属性选择器和伪类选择器：每出现一个类选择器、属性选择器或伪类选择器，就在C的值上加1。

元素选择器和伪元素选择器：每出现一个元素选择器或伪元素选择器，就在D的值上加1。

三、优先级比较

计算完每个规则的优先级值后，从左到右依次比较这四个数字。如果某个数字较大，则对应的规则优先级更高。如果所有数字都相同，则最后出现的规则优先级更高（遵循“就近原则”）。

 

四、特殊情况

!important规则：如果一个样式声明后面跟着!important，那么这个声明的优先级是最高的，无论其他规则的优先级如何。但是，如果有多条!important规则冲突，则仍然需要按照上述规则来计算优先级。

继承的样式：继承得来的样式的优先级是最低的。如果多个规则都适用于同一个元素，但其中一个规则是通过继承得到的，那么它的优先级将低于其他直接声明的规则。

通配符选择器：通配符选择器（*）的特殊性值为（0,0,0,0），它对优先级的贡献为0。

五、示例

假设有以下CSS规则：

#header h1 { color: red; } /* 特殊性值：(0,1,0,1) */

body .content p { color: blue; } /* 特殊性值：(0,0,1,2) */

h1 { color: green; } /* 特殊性值：(0,0,0,1) */

 

根据上述规则，#header h1的优先级最高，因为它包含了一个ID选择器（#header）。如果#header h1和body .content p同时应用于同一个<h1>元素（假设这个<h1>位于.content内且是<header>的子元素），则#header h1的样式将覆盖body .content p的样式。如果都没有匹配到更具体的规则，则最后声明的规则（在本例中是h1 { color: green; }）将作为默认值。

 

以上就是对CSS优先级算法的解释和计算过程。希望这能帮助你更好地理解CSS的层叠和优先级机制。

 

总结如下

!important > id > class > 标签

!important 比 内联优先级高

* 优先级就近原则，样式定义最近者为准;

* 以最后载入的样式为准;