CSS样式权重优先级规则说明

文中部分内容参考自：https://blog.csdn.net/yue_yue_moon/article/details/88828460

css优先级规则

1.css选择规则的权值不同时，权值高的优先；

2.css选择规则的权值相同时，后定义的规则优先；

3. css属性后面加 !important 时，无条件绝对优先；

权值等级划分， 一般来说是划分4个等级：

第一等级：代表 内联样式，如 style=""，权值为 1000；

第二等级：代表 ID选择器，如 #id="", 权值为 100；

第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 10；

第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 1；

此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0；

权重优先级

css属性带有 !important 优先级别最高

> 内联样式(style = " ")

> ID选择器(#id)

> 类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等]

> 元素选择器(p等) = 伪元素选择器(:after/:before/::selection等)

> 通用选择器(*)

> 继承的样式
 

    
Martin Fowler
    
Dijkstra


ul#related span{  //权重：1 + 100 + 1=102
    color:red;
}

#favorite.highlight{  //权重：100 + 10 = 110
    color:orange;
}

.highlight{  //权重：10
    color:black;
}