CSS 优先级

CSS 优先级决定了当多个样式应用于同一个元素时，哪些样式将被浏览器渲染。理解优先级机制有助于开发者编写更有效且可预测的CSS代码。

引入方式的优先级

样式的应用优先级也受到其引入方式的影响，具体如下：

内联样式：直接在HTML元素中使用style属性定义的样式，具有最高优先级。
外部和内部样式表：通过<link>标签引入的外部样式表和在<head>中使用<style>标签定义的内部样式表具有相同的优先级。
@layer：CSS @layer 规则定义的样式，其优先级低于上述方式。

例外情况

!important声明：这是一个例外规则，当样式声明后面加上!important时，这条声明将具有最高优先级，超越其他所有正常规则。

选择器优先级

选择器的具体性也影响着最终样式的优先级，由高到低排列如下：

ID选择器：如 #navbar。
类选择器、伪类选择器：如 .menu-item、:hover。
标签选择器、伪元素选择器：如 div、::before。
通配符选择器、属性选择器、子选择器等：如 *、[type="text"]、>。
:not伪类：其优先级等同于:not中最具体的选择器。

特殊规则

:is()伪类：:is的优先级取决于它参数里最具体的选择器。
:where()伪类：无论内部包含何种选择器，:where伪类的优先级总是为0，这使得它非常适合用于重置样式而不影响特异性。