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

CSS 样式优先级顺序如下：

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

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

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

示例：

  • 内联样式：写在标签属性 style 的样式，如 <span style="color:green">
  • ID 选择器，如 #id{…}
  • 类选择器，如 .class{…}
  • 属性选择器，如 p[type="email"]{…}
  • 伪类选择器，如 input:hover{…}
  • 标签选择器，如 div{…}
  • 伪元素选择器，如 span::before{…}
  • 通配选择器，如 *{…}