• 本文目录导读：
• 1、CSS权重和优先级
• 2、就近原则
• 3、权重相同时就近原则如何运用

在CSS中，当多个样式规则应用于同一元素时，会发生样式重叠的情况。而在这种情况下，CSS遵循就近原则来确定哪些样式将被应用。本文将详细讨论CSS中权重相同时就近原则的运用。

CSS权重和优先级

在了解CSS如何处理权重和优先级之前，需要了解它们是什么。 CSS选择器有不同的特定性值和优先级等级。当多个规则匹配同一个元素时，则会选择具有最高特定性值且最高优先级等级的规则。

以下是CSS选择器按照特定性值从低到高排序：

– 元素选择器：1

– 类别/伪类选择器：10

– ID 选择器：100

– 行内样式（style属性）：1000 !important

以下是CSS属性按照优先级从低到高排序：

– 继承属性（inherit）: 0

– 浏览器默认值(例如color): 1

– 用户定义(例如font-size): 100

如果给一个元素设置了多个样式规则，则根据上述顺序计算它们之间的权重，并以此确定哪些规则将被应用。

就近原则

当多个样式规则具有相同的特定性值和优先级等级时，就近原则会决定哪些样式将被应用。这意味着CSS将选择最后定义的规则，而不是第一个或中间的规则。

例如，在以下代码中：

“`

p {

color: red;

}

color: blue;

即使两个规则都具有相同的特定性值和优先级等级，但是因为后面一个规则定义了颜色为蓝色，所以蓝色将被应用于段落元素上。

权重相同时就近原则如何运用

在CSS中，如果存在多个选择器并且它们都具有相同的特定性值和优先级等级，则遵循就近原则。这意味着最后定义的选择器将覆盖之前定义的选择器。

例如：

font-size: 16px;

div p {

font-size: 20px;

在这种情况下，对于`

`元素而言它会继承其父元素`