css选择器的优先级

CSS选择器的优先级是用来决定当多个选择器都应用于同一个元素时，哪个选择器的规则将被应用的一种机制。它是一个权重值，通常用一个四位数的数字表示（例如，0,0,0,0），其中每一位数字代表特定的选择器部分。优先级从左到右逐位比较，数字越大，优先级越高。

以下是CSS选择器优先级的说明：

1、内联样式（Inline Styles）： 在HTML元素上使用style属性设置的样式具有最高的优先级。这意味着内联样式将覆盖任何其他样式。

2、ID选择器（ID Selectors）： 使用ID选择器（例如#myId）的选择器具有较高的优先级。每个ID选择器增加100的权重。

3、类选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, and Pseudo-class Selectors）： 这些选择器的权重较低于ID选择器，但高于元素选择器。每个类选择器、属性选择器或伪类选择器增加10的权重。

4、元素选择器（Element Selectors）： 元素选择器（例如p、div）具有较低的优先级。每个元素选择器增加1的权重。

5、通用选择器和伪元素选择器（Universal Selectors and Pseudo-element Selectors）： 通用选择器（*）和伪元素选择器（例如::before、::after）通常具有最低的优先级。

如果有多个选择器应用于同一个元素，浏览器将按照上述规则计算它们的权重，并选择具有最高权重的样式规则应用于元素。如果多个选择器具有相同的权重，那么后面定义的规则将覆盖前面定义的规则，这通常称为“层叠”（Cascading）。

举例来说，如果有以下样式规则：

#myId {  color: blue;}p {  color: red;}

那么对于具有id=”myId”的元素，文字颜色将是蓝色，因为ID选择器的优先级高于元素选择器。如果没有ID选择器应用，那么默认颜色将是红色，因为元素选择器适用于所有元素。