CSS权重计算的优先级规则是一个用于确定当多个CSS样式规则应用于同一元素时，哪一个规则将最终生效的重要机制
从高到低的优先级顺序
1. 内联样式
- 内联样式是直接写在HTML元素的
style属性中的样式，其权重值为1,0,0,0，具有最高的优先级。这意味着无论在外部CSS文件或<style>标签中定义了何种样式，只要元素有内联样式，内联样式就会优先应用，并覆盖其他选择器定义的相同样式。例如：<p style="color: red;">这是一段红色的文字</p>，这里的color: red内联样式会使该段落文字颜色为红色，即使在外部CSS中有针对p元素的其他颜色样式定义，也不会生效。
2. ID选择器
- ID选择器以
#开头，用于选择具有特定ID的元素，权重值为0,1,0,0。ID选择器的优先级仅次于内联样式。如果一个元素既有内联样式又有ID选择器定义的相同样式，内联样式将优先；如果没有内联样式，ID选择器定义的样式则会生效。例如，对于元素<p id="myPara">这是一段文字</p>，若有以下CSS规则：
#myPara {
color: blue;
}
则该段落文字颜色将为蓝色，除非存在内联样式覆盖它。
3. 类选择器、属性选择器和伪类选择器
- 类选择器以
.开头，用于选择具有特定类名的元素；属性选择器根据元素的属性来选择元素；伪类选择器用于选择处于特定状态的元素，如:hover、:active等。这三种选择器的权重值相同，均为0,0,1,0。当多个类选择器、属性选择器或伪类选择器同时应用于一个元素时，它们的权重相同，后面定义的样式会覆盖前面定义的样式。例如：
.myClass {
color: green;
}
[type="text"] {
color: yellow;
}
a:hover {
color: purple;
}
如果一个元素同时具有这些选择器所对应的条件，那么在鼠标悬停时，链接颜色将为紫色；若不是悬停状态且元素具有 myClass 类名和 type="text" 属性，颜色将为黄色，因为它是最后定义的具有相同权重的样式。
4. 元素选择器和伪元素选择器
- 元素选择器直接选择HTML元素，如
p、div、h1等；伪元素选择器用于选择元素的特定部分，如::before、::after等。它们的权重值为0,0,0,1，是优先级相对较低的选择器。当多个元素选择器或伪元素选择器应用于同一元素时，同样遵循后面定义的样式覆盖前面定义的样式的原则。例如：
p {
color: gray;
}
p::before {
content: "前缀";
color: orange;
}
这里 p 元素的文字颜色为灰色，但伪元素 p::before 插入的内容颜色为橙色，各自的样式按照权重和定义顺序生效。
选择器组合的权重计算
- 当一个样式规则由多个选择器组合而成时，其权重是各个选择器权重值的相加。例如：
#myId.myClass p { color: orange; }，这个选择器组合包含了ID选择器、类选择器和元素选择器，其权重计算为0,1,0,0 + 0,0,1,0 + 0,0,0,1 = 0,1,1,1。在比较多个选择器组合的优先级时，按照从左到右依次比较权重值的各个部分。如果第一个部分不同，则权重值大的样式规则优先应用；如果第一个部分相同，则比较第二个部分，以此类推。例如，对于选择器组合0,1,1,1和0,1,0,1，前者的优先级更高，因为其第三个部分的值更大。
继承样式的优先级
- 继承的样式权重最低，其权重值为
0,0,0,0。如果一个元素没有显式定义某个样式属性，而其祖先元素定义了该属性并可继承，那么该元素会继承祖先元素的样式。但是，如果该元素自身通过其他选择器定义了相同的样式属性，那么自身定义的样式将优先应用，无论继承的样式权重如何。例如，在以下HTML和CSS结构中：
<div style="color: blue;">
<p>这是一段文字</p>
</div>
p {
color: red;
}
尽管 p 元素位于具有蓝色文字颜色的 div 元素内部，但由于 p 元素自身通过元素选择器定义了 color: red 的样式，所以该段落文字颜色为红色，而不是继承自父元素的蓝色。
相同权重的样式覆盖规则
- 如果多个样式规则具有相同的权重，那么它们的顺序就非常重要。在CSS中，后面定义的样式会覆盖前面定义的样式。这适用于所有具有相同权重的选择器或选择器组合。例如：
.myClass {
color: green;
}
.myClass {
color: yellow;
}
这里两个类选择器的权重相同，但由于后面的 .myClass 样式定义在后面，所以具有该类名的元素的颜色将为黄色。
CSS权重计算的优先级规则明确了不同类型选择器及选择器组合在应用样式时的先后顺序，帮助开发者准确地控制页面元素的样式表现，避免样式冲突和意外的显示效果，从而实现预期的页面设计和布局。在实际开发中，理解和运用这些规则是编写高效、可维护CSS代码的关键。
