CSS权重优先级是如何计算的?

　　在CSS中，权重(specificity)是用来确定样式规则应用优先级的一种机制。权重是由选择器的组合确定的，其中每个选择器都有一个特定的权重值。当多个规则应用于同一元素时，浏览器使用权重来确定哪一个规则应该覆盖另一个规则。

　　CSS权重通常由四个部分组成，按照从最高优先级到最低优先级的顺序为：

　　1.内联样式(Inline styles):

　　应用于元素的style属性。权重值为1000。

<div style="color: red;">This is red text</div>

　　2.ID选择器(ID selectors):

　　通过ID选择器选择的元素。权重值为100。

#myElement {
  color: blue;
}

<div id="myElement">This is blue text</div>

　　3.类选择器、属性选择器和伪类选择器(Class selectors, Attribute selectors, and Pseudo-class selectors):

　　权重值为10。

.button {
  background-color: green;
}

<button class="button">Click me</button>

　　4.元素选择器和伪元素选择器(Element selectors and Pseudo-element selectors):

　　权重值为1。

　　当应用多个规则时，浏览器将选择具有最高权重的规则。如果权重相同，则后定义的规则将覆盖先定义的规则。

　　举例说明权重计算的方法：

#myElement {
  color: red; /* 权重值为 100 */
}

.button {
  color: blue; /* 权重值为 10 */
}

p {
  color: green; /* 权重值为 1 */
}

　　如果一个元素同时具有ID为myElement、类为button，且为

　　元素，那么最终颜色将是红色，因为ID选择器的权重值最高。如果两个规则具有相同的权重，则后定义的规则将覆盖前面的规则。