CSS权重是指浏览器在解析CSS样式时，根据不同的选择器类型和组合方式来确定应用于元素的最终样式规则：
权重的基本概念
- CSS权重由4个部分组成，从左到右依次为：
0,0,0,0。每个部分对应不同类型的选择器，权重值越大，优先级越高。当多个样式规则应用于同一个元素时，浏览器会根据权重来决定最终应用的样式。
选择器类型及权重值
1. 内联样式
- 内联样式是直接写在HTML元素的
style属性中的样式，其权重值为1,0,0,0。例如：<p style="color: red;">这是一段红色的文字</p>，这里的color: red就是内联样式，它具有最高的优先级，会覆盖其他任何选择器定义的相同样式。
2. ID选择器
- ID选择器以
#开头，用于选择具有特定ID的元素，其权重值为0,1,0,0。例如：#myId { color: blue; }，这个样式规则会将ID为myId的元素的文字颜色设置为蓝色。如果一个元素同时有内联样式和ID选择器定义的相同样式，内联样式将优先应用。
3. 类选择器、属性选择器和伪类选择器
- 类选择器以
.开头，用于选择具有特定类名的元素；属性选择器根据元素的属性来选择元素；伪类选择器用于选择处于特定状态的元素，如:hover、:active等。这三种选择器的权重值相同，均为0,0,1,0。例如：.myClass { color: green; }、[type="text"] { color: yellow; }、a:hover { color: purple; }，这些样式规则会根据相应的条件来应用样式。当多个类选择器、属性选择器或伪类选择器同时应用于一个元素时，它们的权重相同，后面定义的样式会覆盖前面定义的样式。
4. 元素选择器和伪元素选择器
- 元素选择器直接选择HTML元素，如
p、div、h1等；伪元素选择器用于选择元素的特定部分，如::before、::after等。它们的权重值为0,0,0,1。例如：p { color: gray; }、p::before { content: "前缀"; }，元素选择器会将所有p元素的文字颜色设置为灰色，伪元素选择器则会在p元素之前插入指定的内容。
权重计算规则
1. 多个选择器组合
- 当一个样式规则由多个选择器组合而成时，其权重是各个选择器权重值的相加。例如：
#myId.myClass p { color: orange; }，这个选择器组合包含了ID选择器、类选择器和元素选择器，其权重计算为0,1,0,0 + 0,0,1,0 + 0,0,0,1 = 0,1,1,1。
2. 继承样式的权重
- 继承的样式权重最低，其权重值为
0,0,0,0。如果一个元素没有显式定义某个样式属性，而其祖先元素定义了该属性并可继承，那么该元素会继承祖先元素的样式。但是，如果该元素自身通过其他选择器定义了相同的样式属性，那么自身定义的样式将优先应用，无论继承的样式权重如何。
比较权重的方法
- 当多个样式规则应用于同一个元素且存在样式冲突时，浏览器会按照权重值从高到低的顺序来比较。首先比较权重的第一个部分，如果第一个部分不同，则权重值大的样式规则优先应用；如果第一个部分相同，则比较第二个部分，以此类推。如果所有部分的权重值都相同，则后面定义的样式规则优先应用。
注意事项
- 在实际开发中，应尽量避免使用过于复杂的选择器组合来提高权重，以免造成样式的混乱和难以维护。同时，要注意样式的优先级顺序，合理地组织和使用选择器，以确保样式的正确应用和页面的显示效果。如果对样式的优先级有特殊要求，可以通过调整选择器的类型和组合方式来控制权重，但也要遵循一定的规范和原则，保持样式表的可读性和可维护性。
CSS权重计算是CSS样式应用中的一个重要概念，了解和掌握权重计算规则有助于更好地控制页面的样式表现，避免样式冲突和意外的显示效果，从而提高网页开发的效率和质量。
