CSS 选择器特异性和优先级

当多个 CSS 选择器应用于单个元素时，浏览器必须确定哪个选择器优先。这称为选择器特异性。

确定选择器特异性的规则：

1. ！重要和内联样式覆盖：

   • 使用 !important 标志声明的样式或使用 style 属性内联的样式具有最高优先级。

2. 特异性：

   • 选择器的特异性由其组成部分的数量和类型决定：

     • #id 的特异性高于.classname
     • .classname 比 tagname

3. 最后一条规则优先：

   • 如果两个选择器具有相同的特异性，则 CSS 文件中最后声明的选择器优先。

示例：

考虑以下 CSS 规则：

body { font-size: 14px; }
#header { font-size: 16px; }

对于

元素，这两个规则都适用。但是，由于 #header 选择器具有更高的特异性（#id > 标记名），因此其 16px 的字体大小值将应用于

元素。

注：

针对同一元素且具有不同特异性级别的多个规则并不罕见。这可用于优化特定情况的样式或覆盖特定实例的全局规则。