CSS 样式优先级

CSS 样式优先级决定了最终呈现在浏览器中的样式是哪一组样式，在多组样式中有冲突时，最终呈现在浏览器中的样式是具有最高优先级的样式。

CSS 样式优先级顺序如下：

内联样式 > 内部样式 > 外部样式

!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器 > 浏览器默认样式

如果两组样式具有相同的优先级，则后定义的样式将覆盖先定义的样式。

浏览器默认样式是指浏览器在渲染 HTML 文档时，为每个 HTML 元素设置的默认样式。这些默认样式取决于浏览器的版本和类型，并且可能会因浏览器之间的差异而产生不一致。为了保证页面的一致性，通常会采用 CSS reset 或 normalize.css 这样的技术来重置浏览器的默认样式。

示例：

• 内联样式：写在标签属性 style 的样式，如 <span style="color:green">
• ID 选择器，如 #id{…}
• 类选择器，如 .class{…}
• 属性选择器，如 p[type="email"]{…}
• 伪类选择器，如 input:hover{…}
• 标签选择器，如 div{…}
• 伪元素选择器，如 span::before{…}
• 通配选择器，如 *{…}
• 浏览器默认样式，p 元素在 Chrome 浏览器 [版本 109.0.5414.119（正式版本） (x86_64)] 中样式如下：

p {display: block;margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0px;margin-inline-end: 0px;
}

 

上述代码在开发者工具的【元素】>【样式】中可查看，并未体现字体的样式，但其实 Chrome 浏览器有默认字体大小，默认字体大小为 16px，并限制了最小字体大小为 12px。

对于最小字体大小， Chrome 浏览器最小字体大小可能因用户设置和系统不同而有所变化，但通常情况下最小字体大小为最小可读字体大小，约为 12px。

当设置字体大小样式为：

 

p {font-size: 1px;
}

字体大小始终为 12px，但margin-block-start和margin-block-end会随着字体大小的设置而改变，其实际值分别为 1px。