CSS选择器有哪些优先级规则

CSS选择器的优先级规则决定了当多个样式应用于同一个HTML元素时，哪个样式将被应用。以下是CSS选择器优先级的基本规则：

内联样式（Inline Styles）：直接写在HTML元素内部的样式具有最高的优先级，如<p style="color: red;">。内联样式会覆盖其他在CSS样式表或<style>标签中定义的样式。

ID选择器：ID选择器（如#myId）具有次高的优先级。每个HTML元素都应该是唯一的，因此ID选择器通常只应用于一个元素。

类选择器、属性选择器和伪类：类选择器（如.myClass）、属性选择器（如input[type="text"]）和伪类（如:hover）具有中等的优先级。它们之间的优先级是相等的，但是会低于ID选择器。

元素选择器：元素选择器（如p、div等）具有最低的优先级。

!important规则：在任何样式声明的末尾添加!important都会覆盖其他所有样式，包括内联样式。但是，尽量避免使用!important，因为它会破坏样式的可维护性和可读性。

特异性（Specificity）：当多个样式选择器具有相同的优先级（如都是类选择器或都是ID选择器）时，将比较它们的选择器特异性。特异性是通过四个数字来计算的，从左到右分别代表：

内联样式（如果存在）：1, 0, 0, 0

ID选择器数量

类选择器、属性选择器和伪类数量

元素选择器、伪元素数量

例如，#myId p的特异性是0, 1, 0, 1（一个ID和一个元素选择器），而.myClass .anotherClass的特异性是0, 0, 2, 0（两个类选择器）。在这种情况下，#myId p的优先级更高。

源顺序：如果两个样式具有相同的优先级和特异性，那么后出现的样式将覆盖先出现的样式（源顺序）。这通常发生在同一个CSS文件或<style>标签中，或者当多个样式表链接到同一个HTML文件时。

继承：某些CSS属性值可以从父元素继承到子元素。但是，继承的优先级总是低于任何直接应用于元素的样式。

默认样式：浏览器为每个HTML元素提供了一套默认的样式。如果没有其他样式应用于元素，那么它将使用这些默认样式。默认样式的优先级低于任何其他样式。