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元素提供了一套默认的样式。如果没有其他样式应用于元素,那么它将使用这些默认样式。默认样式的优先级低于任何其他样式。